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

我是主干网新手，似乎无法显示收集的数据。请指出错误的部分

考虑以下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>

内容提供商
${name}

依赖项：

<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>

另外，如果你能分享到真正好的学习骨干资源，我将不胜感激

试试这个：

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

我猜，在renderProvider方法中，您得到了错误的上下文。

---

这应该管用

过了一段时间后，终于让它起作用了

关键是

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

});

---

您是否在任何地方设置视图的

el

id

（至少在vanilla backbone.js中，不确定是否有木偶）是模型的属性，而不是视图。抱歉，不确定。但是，当您硬编码json数据并将其传递给集合实例时，代码工作正常。我的问题是如何通过收集获取显示来自服务器的数据。它不工作。你正在从服务器取回数据吗？需要记住的一个潜在问题是，获取是异步的，因此有可能在获取数据之前触发渲染方法。可以通过以下方式确定：console.log（providers.models）；也许可以尝试在成功回调中调用render方法（可以在调用fetch之前将集合传递给视图）。