javascript - 如何不重新渲染 Mithril 中的整个列表

我已经使用React一段时间了，想尝试一下Mithril.js。

浏览了文档和示例并喜欢我所看到的内容，因此我说我应该动手开始编码！

我有一个简单的API调用，它接收JSON数据，然后输出包含所有项目的ul列表。我已经为动画集成了GSAP TweenMax，我想要实现的目标非常简单-我先淡入，然后在oncc上淡入，然后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);

我是新来的..刚从昨天开始阅读。

最佳答案

使动画库与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作为键。

关于javascript - 如何不重新渲染 Mithril 中的整个列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31672967/