0

私はバックボーンが初めてで、コレクションからのデータを表示できないようです。間違っている部分を指摘してください。

次の js コードを検討してください。

App.ProvidersView = Backbone.View.extend({
    id: "Providers",

    template: "#-providers-template",

    render: function() {
        var html = $(this.template).tmpl();
        $(this.el).html(html).addClass('container-fluid');
        this.collection.each(this.renderProvider);
    },

    initialize: function() {
        _.bindAll(this, "renderProvider");
    },

    renderProvider: function(Provider){
        var ProviderView = new App.ProviderView({
            model: Provider
        });
        ProviderView.render(Provider);
        $(this.el).append(ProviderView.el);
    }
});

App.ProviderView = Backbone.View.extend({
    id: "Provider",

    template: "#-provider-template",

    initialize: function(){
        this.template = $(this.template);
    },

    render: function(){
        var html = this.template.tmpl(this.model.toJSON());
        $(this.el).html(html);
    }

});

App.Provider = Backbone.Model.extend();

App.ProviderCollection = Backbone.Collection.extend({
    url: "php/Provider.php",

    model: App.Provider
});

App.addInitializer(function() {

    var providers = new App.ProviderCollection();

    providers.fetch({success: function() {
        console.log(Providers.models);
    }});

    var provider = new App.Provider();

    var providersView = new App.ProvidersView({
        model: Provider,
        collection: Providers
    });

    providersView.render();

    $("#main").html(providersView.el);
    $("#providers-list").html(provider.el);

});

App.bind('initialize:after', function() {
    Backbone.history.start();
});

$(function() {
    App.start();
});

テンプレート:

<script type="text/x-jquery-tmpl" id="content-providers-template">
    <div class="row-fluid">
        <div class="span12">
            <h5>Content Providers</h5>
        </div>
    </div>
    <div id="content-providers-list"></div>
</script>

<script type="text/x-jquery-tmpl" id="content-provider-template">
    <div class="row-fluid">
        <div class="span12">
            <div class="panel">
                <h2 class="toggle"><i class="icon-chevron-down icon-white pull-right"></i>${name}</h2>
            </div>
        </div>
    </div>
</script>

依存関係:

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="scripts/json2.js"></script>
<script type="text/javascript" src="scripts/underscore.js"></script>
<script type="text/javascript" src="scripts/backbone.js"></script>
<script type="text/javascript" src="scripts/backbone.marionette.js"></script>

また、バックボーンを学習するための本当に優れたリソースを共有していただければ幸いです。

4

2 に答える 2

1

しばらくしてようやくこれが機能するようになりました。

ポイントは、fetch()非同期であることです。つまり、サーバーからのデータがロードされる前に戻ります。

修正は次のとおりです。

App.addInitializer(function() {

    var providers = new App.ProviderCollection();
    var provider = new App.Provider();

    var providersView = new App.ProvidersView({
        model: Provider,
        collection: Providers
    });

    providers.fetch({success: function() {
        console.log(Providers.models);
        providersView.render(); // Render after loading
    }});

    $("#main").html(providersView.el);
    $("#providers-list").html(provider.el);

});
于 2013-03-14T09:56:35.930 に答える
0

これを試して:

render: function() {
    var html = $(this.template).tmpl();
    $(this.el).html(html).addClass('container-fluid');
    var that = this;
    this.collection.each(function() {
        that.renderProvider();
    });
}

私はあなたのrenderProviderメソッドで、あなたはこれの間違った文脈を得ていると思います。これはうまくいくはずです!!

于 2013-03-11T13:51:36.317 に答える