Marionette CollectionView：如何檢查項目是因爲「重置」還是「添加」而添加的？

我正在使用Marionette的CollectionView來呈現ItemViews的項目列表。每當添加新項目時，我想運行一個簡短的淡入動畫。但不是當收集最初呈現時（或收集被重置）。Marionette CollectionView：如何檢查項目是因爲「重置」還是「添加」而添加的？

在使用木偶之前，我處理reset和add事件的方式稍有不同，但我無法弄清楚如何在此處執行此操作。我看了看源代碼，似乎addItemView負責將子視圖和兩個addChildView（當add上觸發採集的稱呼）和render（爲reset事件）調用此方法。

也許我錯過了一些明顯的東西。

來源

2013-05-21 slurmomatic

這是做這件事的一種方法：

包括在你CompositeView聲明這些功能：

onBeforeRender: function(){ 
    this.onBeforeItemAdded = function(){}; 
}, 

onRender: function(){ 
    this.onBeforeItemAdded = myAnimation; 
}

這類似於我提出在我的木偶書溶液（https://leanpub.com/marionette-gentle-introduction/）

工作原理：木偶觸發「之前：渲染」它使得整個集合之前，這樣你就可以設置了onBeforeItemAdded函數什麼都不做。一旦集合已經被渲染，設置該函數爲新的項目視圖設置動畫。

由於每次收集視圖添加一個項目視圖時，它也會觸發「before：item：added」，您可以定義一個onBeforeItemAdded函數，該函數將在觸發該事件時自動調用。這種匹配發生在triggerMethod。

該解決方案應該解決您的問題，而無需在模型上添加標誌。

來源

2013-05-22 16:35:33

謝謝，這個作品很棒 – Dan

這太棒了！可能值得補充的是，item view是'onBeforeItemAdded'中的第一個參數，所以你可以調用'view。on（'show'，myAnimation）'獲得更平滑的結果。 – Salmonface

我認爲你最好的選擇是在CollectionView渲染後綁定你的事件。

myCollectionView.on("render", function() { 
    this.on("after:item:added", executeMyAnimation); 
});

來源

2013-05-21 22:46:34 gustavohenke

這工作得很好用'CollectionView' ，但沒有與'CompositeView'，我結束了其他原因使用。當集合被「重置」時，CompositeView'不會完全重新呈現自身，而只會重新呈現集合的項目視圖。它在我的應用程序中設置的方式是，視圖首先被渲染一個空的集合，稍後取出（並重置）。 'CompositeView'有一個事件'composite：collection：rendered'，但沒有「之前」，所以我無法禁用動畫回調。我結束了模型上的一個「動畫」標誌。 – slurmomatic

大衛Sulc答案是相當哈克，淡入應在項目它的自我中定義，而不是父視圖中。另一件事是，onBeforeItemAdded（）沒有在文檔中提到，所以它可能是內部使用，並可能隨時間而改變。

我的建議是添加以下到父視圖，注意標誌parentRendered：

itemViewOptions: function() { 
     return { 
      collection: this.collection, 
      parentRendered: this.rendered 
     }; 
    }, 
    onRender: function() { 
     this.rendered = true; 
    }

，並使用該標誌昂秀功能項目視圖中：

onShow: function() { 
     // show visual effect on newly added items 
     if (this.options.parentRendered) { 
      this.$el.css('opacity', 0).slideDown(200).animate(
       { opacity: 1 }, 
       { queue: false, duration: 400 } 
      ); 
     } 
     else { 
      this.$el.show(); 
     } 
    }

來源

2014-07-01 18:59:08 user2846569

Marionette CollectionView：如何檢查項目是因爲「重置」還是「添加」而添加的？

回答

相關問題