骨幹視圖：等到收集提取

Question

我想知道如何告訴骨幹等到我的集合已經獲取模型，然後呈現下劃線位。

在控制檯返回從一個字段缺少下劃線模板錯誤。當我CONSOLE.LOG（this.collection.toJSON（）），它不顯示任何數據。所以我認爲，該視圖是在數據被提取之前呈現的。我如何告訴視圖等待它被提取？

///////查看////////

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'collections/mitarbeiter', 
    'text!/aquilamus/templates/mitarbeiter/mitarbeiter.html' 
], function($, _, Backbone, MitarbeiterCollection, MitarbeiterTemplate){ 



var MitarbeiterListView = Backbone.View.extend({ 
    el: $("#container"), 
    initialize: function(){ 
     this.collection = new MitarbeiterCollection; 
     this.collection.fetch(); 
     var newtemplate = MitarbeiterTemplate; 
     this.template = _.template($(newtemplate).html()); 
    }, 
    render: function(){ 
     var renderedContent = this.template(this.collection.toJSON()); 

     $(this.el).html(renderedContent); 
     return this; 
    } 


    }); 
    // Our module now returns our view 
    return MitarbeiterListView; 
}); 

Answer 1

使用reset像別人建議的作品，但這裏是一個另類。

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'collections/mitarbeiter', 
    'text!/aquilamus/templates/mitarbeiter/mitarbeiter.html' 
], function($, _, Backbone, MitarbeiterCollection, MitarbeiterTemplate){ 

var MitarbeiterListView = Backbone.View.extend({ 
    el: $("#container"), 
    initialize: function(){ 
     this.collection = new MitarbeiterCollection; 

     var newtemplate = MitarbeiterTemplate; 
     this.template = _.template($(newtemplate).html()); 
    }, 
    render: function(){ 
     var self = this; 

     // show some loading message 
     this.$el.html('Loading'); 

     // fetch, when that is done, replace 'Loading' with content 
     this.collection.fetch().done(function(){ 
      var renderedContent = self.template(self.collection.toJSON()); 
      self.$el.html(renderedContent); 
     }); 
     return this; 
    } 

    }); 
    // Our module now returns our view 
    return MitarbeiterListView; 
}); 

另一種替代方案是盡除使用the success callback function與此非常相似的東西，你可以把在提取選項。

Answer 2

我不知道有什麼辦法可以說等待，但我知道你可以告訴骨幹（重新）渲染當你的收藏被提取。

initialize: function(){ 
     this.collection = new MitarbeiterCollection; 
     this.collection.fetch(); 
     var newtemplate = MitarbeiterTemplate; 
     this.template = _.template($(newtemplate).html()); 
     this.collection.on('reset', this.render, this); 
    }, 

最後一行收聽您收藏的reset事件。當它被觸發時，它會調用render方法。

Answer 3

收藏獲取觸發事件「復位」時取完成。您可以利用該fetch事件

this.collection.on('reset', this.render); 

Answer 4

fetch也允許你通過一個success處理函數，獲取成功，這將被調用，即：

this.collection.fetch({success: this.render}); 

Answer 5

這個工作對我最好的：

var ArtistListView = Backbone.View.extend({ 
     el: '.left', 
     initialize:function(){ 
      this.render(); 
     }, 
     render: function() { 
      var source = $('#my-list-template').html(); 
      var template = Handlebars.compile(source); 
      var collection = new MyCollection; 
      collection.fetch({async:false}); 
      var html = template(collection.toJSON()); 
      $(this.el).html(html); 
     });