Question

我是骨干新手，我似乎无法显示集合中的数据。请指出不正确的部分。

考虑这些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>

另外，如果你可以分享真正好的资源来学习骨干，我会非常感激。

Answer 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);

});

Answer 2

试试这个：

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

我想，在你的renderProvider方法中，你得到了错误的上下文。这应该工作!!

Backbone：从服务器获取的数据未在视图中显示

2 个答案: