Javascript 如何不在Mithril中重新呈现整个列表

我已经使用react很长一段时间了，想尝试一下Mithril.js

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

我有一个smiple API调用，它接收JSON数据，然后输出包含所有项的

ul

列表。我已经为动画集成了GSAP TweenMax，我试图实现的是非常简单的-我淡入所有内容，在加载时，然后单击

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

---

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

让动画库与Mithril一起工作可能很棘手。当库操作DOM状态时，与Mithril状态的同步可能会中断

幸运的是，情况并非如此：您缺少的是config函数的

isInitialized

参数，该参数仅在第一次调用时为false。测试使淡入只发生一次：

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

在这个简单的例子中，重画也可以简化，我用了一个工作示例：

因为没有DOM操作，所以调用

m.redraw

就足以从DOM中删除div，但是当事情变得更复杂时，您使用

start/endcomputing

可能是正确的。我甚至会将

m.startcompution

移动到

TweenMax.to

调用上方，以使其更加安全，但如果同时发生许多其他事情，则可能会阻止其他重画。你必须找到一个平衡点。：）

我认为，在任何情况下都不需要调用

m.redraw.strategy

。当您不希望任何事情发生（同时也不希望任何事情发生）但异步动画正在启动，因此不会产生任何效果时，通常会使用它

---

编辑：发现另一个问题，无法将

键设置为映射函数的索引，然后当删除某个项目时，该键将更改，从而破坏重新绘制。我已经更新了小提琴，将
项改为使用title
作为键。
是的，我也注意到了这一点，并将其固定在我的一端。谢谢你的解释！我希望有一个关于如何在真实场景中使用Mithril的视频教程/课程。Todo列表永远不足以正确了解框架的工作方式…：（我将不得不切换回React，因为我无法使用Mithril的简单Todo-like应用程序。很高兴我能提供帮助！我正在使用Haxe（）对于web开发，我必须说的是，使用面向对象的MVC而不是混合js风格简化了很多事情。更高级的教程很快进入系统架构，这需要写很多东西。Mithril保持简单，可以专注于架构，反应使事情复杂化，并将事情更深入到结构和内容中行动。哦，好吧，很多随机的想法…希望我有时间写一些。也许以后。：）这正是我喜欢Mithril的地方，它非常灵活，但我不知道如何在现实世界中，日常项目中使用它。我希望有一段视频是有人和Mithril一起开发应用程序。我明白，这并不简单。在深入研究MVC（包括与作者交谈）的过程中，有两件事对我帮助最大，那就是将视图制作成一个对象，并且任何M、V和C组合都可以由同一个对象播放。我只是在这里对它发表了评论：如果你想了解更多，请随时给我发邮件。