特定分割後無法插入內容。 Backbone.js的

ProductListView.js

define(['jquery', 'underscore', 'backbone', 'views/ProductView', 'views/PaginatorView'], function($, _, Backbone, ProductView, PaginatorView) { 
    var ProductListView = Backbone.View.extend({ 
     className: 'productsList', 
     initialize: function() { 
      this.render(); 
     }, 
     render: function() { 
      // some initialization 
      // that's for zurb grid     
      this.$el.addClass('twelve columns'); 

      for(var i = startPos; i < endPos; i++) { 
       this.$el.append(new ProductView({ model: products[i] }).render().el); 
      } 

      this.$el.append(new PaginatorView({ model: this.model, page: this.options.page }).render().el); 
      // this.$el.after(new PaginatorView({ model: this.model, page: this.options.page }).render().el); 
      return this; 
     } 
    }); 
    return ProductListView; 
});

看來我不能this.$el後插入一些東西。該生產線

this.$el.after(new PaginatorView({ model: this.model, page: this.options.page }).render().el);

雖然可以將（ProductListView）內PaginatorView追加查看它似乎是不可能插入外面的東西。

你有沒有遇到類似的事情？

來源

2012-12-21 lexeme

this.$el.after將失敗，因爲當render()被調用時，this.$el尚未被插入到DOM中（它只是一個懸掛div）。

Backbone鼓勵您在插入前等待視圖的HTML內容準備就緒。這樣，瀏覽器只會重新打開窗口一次，性能會更好。

作爲一個經驗法則，您應該只處理Backbone視圖中駐留在this.$el內的內容。

來源

2012-12-21 13:10:15

好吧，我會盡量把它移動到路由器！我懷疑它是從DOM中分離出來的。謝謝！ – lexeme

如果視圖元素尚未添加到DOM（「已斷開連接」），那麼調用after()就不會更改元素或DOM。但是，它確實會返回一個包含兩個元素的集合，您可以將它們分配給this.$el以稍後添加它們。但我很肯定這不是一個好的做法，因爲View只是糾結於一個單一的元素。

來源

2012-12-21 13:17:48 Bergi

這可能會導致一些問題，因爲'el'和'$ el'不再匹配，'setElement'也有一個問題。而且你最終會將委託綁定到不是'$ el'的東西上。可能工作，但它聞起來很糟糕，並可能在你最不期待的時候以新的和有趣的方式突破。 –

是的，這就是爲什麼我說「不好的做法」。 *打破有趣的方式* :-) – Bergi

特定分割後無法插入內容。 Backbone.js的

回答

相關問題