重新渲染僅更改Marionette.js部分CollectionView

下面是我現在有的代碼，每次添加或刪除模型時都會重新呈現collectionView。然而，它看起來沒有效率，因爲它每次都要渲染整個事物，而當我真正需要的是一個模型視圖被刪除或一個被添加。那麼我怎麼能做到這一點？重新渲染僅更改Marionette.js部分CollectionView

var CollectionView = Marionette.CollectionView.extend({ 

    childView: ModelView, 

    initialize: function() { 
     [ "add", "remove" ].forEach(function(eventName) { 
      this.listenTo(this.collection, eventName, this.render, this); 
     }.bind(this)); 
    } 

});

在此先感謝您的幫助！

來源

2016-03-06 user162097

你可以分享我們可以玩的[mcve] ..嗎？ –

@TJ好吧，我已經在JSFiddle [這裏]（https://jsfiddle.net/z5zs3jq0/8/）上舉了一個例子（因爲必須有相當多的代碼行才能使它工作，即使我沒有'包括一個路由器或任何其他真正多餘的功能）。此時的示例創建800個ItemView並通過CollectionView在頁面上顯示它們。當您單擊刪除按鈕時，模型將從集合中刪除，並且視圖會自動重新渲染。但是，頁面上的項目越多，重新渲染所需的時間就越長，這意味着它再次渲染整個事物...... – user162097

...而不是僅從DOM中刪除單個已刪除的ItemView，這會最有效率。例如，嘗試更改「start」事件處理程序中的循環，以便它只創建8個項目而不是800個，然後刪除一個，而且它明顯更快。 – user162097

這是已經完成automatically in Marionette：

將模型添加到集合，集合視圖將渲染，在對項目的意見收集一個模型。

當模型從集合中刪除（或銷燬/刪除），集合視圖將關閉並刪除該模型的項目視圖。

來源

2016-03-06 01:56:32 Tholle

有趣的是，你說，因爲它不會自動爲我工作。我得看看，也許我在某個地方做錯了什麼。 – user162097

我可能是錯的，但我認爲只有在調用collectionView的'render'函數時纔會更新頁面，我認爲它會再次渲染所有DOM元素，而不僅僅是那些已經改變的元素。 – user162097

Tholle是正確的 - 改變你的例子在這裏https://jsfiddle.net/z5zs3jq0/9/ 打開它並打開控制檯 - 你會看到第一次800渲染，然後每2000毫秒新的添加項目的另一個渲染+ if你刪除一個項目，你也會看到一個渲染文本添加到控制檯 –

重新渲染僅更改Marionette.js部分CollectionView

回答

相關問題