如何不重新呈現在Mithril整個列表

我已經使用了相當一段時間的反應，並希望嘗試Mithril.js。如何不重新呈現在Mithril整個列表

通過文檔和例子，並喜歡我所看到的，所以我說我應該讓我的手髒，並開始編碼！

我有一個smiple API調用，接收一個JSON數據，然後輸出ul列表與所有項目。我已經整合了GSAP TweenMax來製作動畫，而且我想要實現的功能非常簡單 - 我在onload中淡入所有內容，然後onclick我想淡入淡出元素並將其從DOM /數據中移除。

什麼似乎是發生的是，該元素淡出，整個ul列表被重新渲染和元素保留在DOM 0不透明度：

var Item = { 
    list: function() { 
     return m.request({method: 'GET', url: '/api/items'}); 
    } 
} 

var dm = { 
    controller: function(data) {     
     var items = Item.list(); 
     return { 
      items: items, 
      remove: function(item) {     
       items().data.splice(items().data.indexOf(item), 1); 
      } 
     } 
    }, 

    view: function(ctrl) {  
     return m('ul', [ 
      ctrl.items().data.map(function(item, id){ 
       return m('li',{ 
        key: id, 
        config: fadesIn, 
        onclick: fadeOut(ctrl.remove.bind(this, item)) 
       }, item.title); 
      }) 
     ]); 
    } 
} 

var fadesIn = function(element){ 
    var tl = new TimelineMax(); 
    tl.from(element, .5, {opacity: 0}); 
} 

var fadeOut = function(callback) { 
    return function(e) { 
     m.redraw.strategy('none'); 
     TweenMax.to(e.target, .5, {opacity: 0, onComplete: function() { 
      m.startComputation();   
      callback();   
      m.endComputation(); 
     }}); 
    } 
} 

m.mount(document.getElementById('test'), dm);

我很新。。昨天剛剛開始閱讀。

來源

2015-07-28 Such Much Code

讓動畫庫與Mithril一起工作可能會非常棘手。當庫操作DOM狀態時，與祕銀狀態的同步可以被打破。

幸運的是，情況並非如此：缺少的是配置函數的參數isInitialized，僅在第一次調用時爲false。對於通過測試，淡入只發生一次：

var fadesIn = function(element, isInit){ 
    if(isInit) return; 
    var tl = new TimelineMax(); 
    tl.from(element, .5, {opacity: 0}); 
}

在這個簡單的例子重新劃分也可以簡化，我做了一個工作示例小提琴：

http://jsfiddle.net/ciscoheat/dkyc0ryc/

由於沒有DOM操作，調用m.redraw就足以從DOM中刪除div，但在事情變得更復雜時，您可能正確使用了start/endComputation。我甚至會將m.startComputation移動到TweenMax.to以上，以使其更加安全，但如果同時發生其他許多事情，則可能會阻止其他重繪。你必須找到一個平衡點。 :)

在任何情況下，我認爲不需要致電m.redraw.strategy。它主要用於你什麼也不想發生（同步）的情況，但異步動畫正在啓動，所以它不會有任何效果。

編輯：發現另一個問題，key不能設置爲地圖功能的索引，然後它會改變時，一個項目被刪除，搞砸了重畫。我更新了小提琴而不是使用item.title作爲關鍵。

來源

2015-07-28 12:00:19 ciscoheat

是的，我注意到了，並固定在我的最後。感謝您的解釋！我希望有一個關於如何在真實世界場景中使用Mithril的視頻教程/課程。 Todo列表遠遠不夠，無法正確理解框架的工作原理...... :(我必須切換回React，因爲我無法獲得比簡單的Todo-like應用程序更遠的地方。 –

很高興我可以幫助！我使用Haxe（http://haxe.org）進行Web開發，使用OOP與MVC而不是混合js風格簡化了很多事情，我必須說的更多高級教程快速進入系統架構，這需要寫很多東西，Mithril保持簡單並且可以專注於架構，React使事情變得複雜，並且把東西變得更加結構化和抽象化，噢，很多隨意的想法......希望我有時間寫一些關於它，也許以後。:) – ciscoheat

這正是我對Mithril的喜歡，它非常靈活，但我無法弄清楚如何將它用於真實世界，日常項目。我希望有人制作一個與祕銀應用程序的視頻。 –

如何不重新呈現在Mithril整個列表

回答

相關問題