集合模型的骨架預渲染

Question

我想在集合提取模型之後但在模型渲染之前執行操作，清除父元素。

我偶然發現before and after render methods但它們是模型特定的，這將導致我的父元素在每個模型渲染之前清除。

我當然可以執行預取動作，但我希望在提取完成之前和渲染模型之前發生該操作。

我嘗試使用重置和更改事件監聽集合，但都導致不需要的最終結果。 重置事件接縫朝那個方向走，但傳遞的參數是整個集合而不是集合中的單個模型，因此使用add事件回調是不可能的，因爲參數類型不同（集合而不是所需的模型）

任何想法如何在獲取集合提取時調用回調已成功但模型尚未呈現？

模型包含返回的屬性，而集合包含用於獲取和解析方法以返回參數包裝對象的url。

下面是我用來呈現集合視圖的代碼，它基本上呈現集合中的每個模型的視圖。

Collection View 
--------------- 
var FoosView = Backbone.View.extend({ 
     el: '#plans', 
     events: { 
      //'click tr': 'rowClick' 
     }, 
     initialize: function() { 
      this.listenTo(this.collection, 'add', this.renderNew); 

      _.bindAll(this, "render"); 

      this.render(); 
     }, 
     renderNew: function(FooModel) { 

      var item = new FooView({model: FooModel}); 
      this.$el.prepend(item.render().$el); 
     } 
     ... 
    }); 

The model view 
-------- 
var FooView = Backbone.View.extend({ 
     tagName: 'li', 
     initialize: function(options) { 
      this.options = options || {}; 
      this.tpl = _.template(fooTpl); 
     }, 
     render: function() { 
      var data = this.model.toJSON(); 

      this.$el.html(this.tpl(data)); 

      return this; 
     } 
    }); 

在此先感謝。

Answer 1

OK，我想我明白你的問題，這裏是一個建議的解決方案。您現在正在收聽您收藏中的reset活動，並致電this.renderAll。 this.renderAll將從集合中獲取模型列表並將其呈現給頁面，但僅在列表元素清空後。希望這可以幫助 ：）。

var FoosView = Backbone.View.extend({ 
    el: '#plans', 
    collection: yourCollection, // A reference to the collection. 
    initialize: function() { 
     this.listenTo(this.collection, 'add', this.renderNew); 
     this.listenTo(this.collection, 'reset', this.renderAll); 
    }, 
    renderAll: function() { 
     // Empty your list. 
     this.$el.empty(); 
     var _views = []; // Create a list for you subviews 
     // Create your subviews with the models in this.collection. 
     this.collection.each(function(model) { 
      _views.push(new FooView({model: model}); 
     }); 
     // Now create a document fragment so as to not reflow the page for every subview. 
     var container = document.createDocumentFragment(); 
     // Append your subviews to the container. 
     _.each(_views, function(subview) { 
      container.appendChild(subview.render().el); 
     }); 
     // Append the container to your list. 
     this.$el.append(container); 
    }, 
    // renderNew will only run on the collections 'add' event. 
    renderNew: function(FooModel) { 
     var item = new FooView({model: FooModel}); 
     this.$el.prepend(item.render().$el); 
    } 
}); 

我不得不HTML假設你的幾件事，但我認爲上面的代碼應該足夠讓你啓動和運行。讓我知道它是否有效。

Answer 2

我不能完全肯定你問什麼，但你嘗試過：

MyCollection.fetch({ 
    success: function(models,response) { 
     //do stuff here 
    } 
}); 

你也可能有興趣在http://backbonejs.org/#Model-parse

希望它可以幫助考慮看看！

編輯：提取和渲染之間沒有直接聯繫，我的打賭是你將渲染綁定到模型變化。

使用 =============== >>>>http://backbonejs.org/#Model-parse