骨干网:从服务器获取的数据未显示在视图中

问题描述

我刚接触骨干网，但似乎无法显示集合中的数据.请指出不正确的部分.

I'm new to backbone and I just can't seem to display the data from a collection. Please point out the incorrect part.

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

此外，如果您可以分享非常好的资源来学习骨干，我将不胜感激.

Also, if you can share really good resources to learning backbone, I would highly appreciate it.

推荐答案

一段时间后终于可以使用它了.

Finally got this to work after some time.

关键是 fetch()是异步的，这意味着它会在加载服务器中的数据之前返回.

The point is that fetch() is asynchronous, meaning it returns before data from the server is loaded.

解决方法:

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

});

这篇关于骨干网:从服务器获取的数据未显示在视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！