Question

我已经使用了反应很长一段时间，并想尝试Mithril.js。

通过文档和示例，并喜欢我所看到的，所以我说我应该弄脏手，开始编码！

我有一个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);

我很新......昨天开始读书。

Answer 1

让动画库与秘银一起工作可能会非常棘手。当库操纵DOM状态时，可以破坏与秘银状态的同步。

幸运的是情况并非如此：您缺少的是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足以从DOM中删除div，但是当事情变得更复杂时，您可能正确使用start/endComputation。我甚至会在m.startComputation调用之上移动TweenMax.to以使其更安全，但如果同时发生许多其他事情，则可能会阻止其他重绘。你必须找到一个平衡点。：）

我认为在任何情况下都不需要致电m.redraw.strategy。它主要用于你什么都不想发生的时候（同步也是如此），但异步动画正在启动，所以它不会有任何影响。

编辑：发现另一个问题，key无法设置为地图功能的索引，然后当项目被移除时会更改，弄乱重绘。我已经更新了使用item.title作为关键字的小提琴。

如何不在Mithril中重新渲染整个列表

1 个答案: