主幹：從服務器獲取的數據不會顯示在視圖上

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

試試這個：

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

我想，在你renderProvider方法，你得到的這個錯誤的上下文。 這應該工作！

Answer 2

終於在一段時間後，這個工作。

問題是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); 

});