如何不重新渲染秘銀中的整個列表

Question

我已經使用React一段時間了，想嘗試一下Mithril.js。

瀏覽了文檔和示例並喜歡我所看到的內容，所以我說我應該動手開始編碼！

我有一個簡單的API調用，它接收JSON數據，然后輸出包含所有項目的ul列表。 我已經將GSAP TweenMax集成到動畫中，並且我想要實現的目標非常簡單-我先淡入所有內容，然后在onload加載，然后在onclick上淡入淡出，以淡出一個元素並將其從DOM /數據中刪除。

似乎正在發生的事情是該元素正在逐漸消失，整個ul列表正在重新呈現，並且該元素以0不透明度保留在DOM中：

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);

我很新..從昨天開始閱讀。

Answer 1

使動畫庫與Mithril配合使用可能會很棘手。 當庫處理DOM狀態時，與Mithril狀態的同步可能會中斷。

幸運的是，事實並非如此：您缺少的是config函數的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的調用足以將div從DOM中刪除，但是當事情變得更加復雜時，使用start/endComputation可能是正確的。 我什至將m.startComputation移到TweenMax.to上方以使其更加安全，但是如果同時發生其他許多事情，則可能會阻止其他重繪。 您必須找到一個平衡點。 :)

我認為在任何情況下都不需要調用m.redraw.strategy 。 當您不希望任何事情發生（同步）時，通常使用它，但是異步動畫正在開始，因此不會產生任何效果。

編輯：發現另一個問題，不能將key設置為map函數的索引，然后在刪除項目時它將更改，從而使重繪混亂。 我更新了小提琴，改為使用item.title作為鍵。