Mithril.js:如果视图使用子组件，排序数据不会重新渲染

Mithril.js: sorting data not re-rendered if view uses subcomponent

本文关键字：数据 排序 新渲染 组件 js 如果 视图 Mithril      更新时间：2023-09-26

我正在尝试对数据列表进行排序并反映更改，但是如果我使用子组件来呈现内容，我的视图就不会刷新。

我的排序函数被调用简单的按钮的onclick:

m('button', {onclick: ctrl.sort}, 'sort'),

这是一个重复我的问题的文件。第一个版本使用子组件进行渲染。https://jsfiddle.net/4trL6y22/

ctrl.names.map(function(name){
    return m(Hello, {who: name});
})

如果重写了没有子组件的代码，视图会在排序发生后刷新:https://jsfiddle.net/4trL6y22/1/

ctrl.names.map(function(name){
    return m('h1', name);
})

(我的实际情况更复杂，并且从子组件中受益)。我还错过了什么，才把这种困难写进了书里?

从查看代码片段来看，我认为您误解了控制器函数的运行方式。

当然，控制器在创建组件时只执行一次，而不会在后续的差异中执行。(一般来说，该语句的例外情况包括key发生变化(afaiu)。)

因此，将options.who直接放在视图中比在组件的控制器中设置它更可取(它使其成为一个纯组件，因此为什么我认为它更可取—意味着在更少的地方维护状态)，这解决了一个问题。

另一个问题是names属性被设置为初始化时list prop的结果，但从未更新过(尽管，如果进行上述更改，则正确的功能出现发生，因为list更新了，因为sort()执行和就地排序—https://jsfiddle.net/bruce_one/1qpresbf/vs https://jsfiddle.net/bruce_one/m3c5rn92/演示了我试图解释的内容)。因此，与其在控制器中调用prop，不如在检索视图中的值时调用它。

所以这两个变化(和一个.slice(0)得到使排序非突变(ish))变成:https://jsfiddle.net/bruce_one/4trL6y22/3/

我不确定这是否是解决问题的最佳方法，但您可以将重绘策略设置为"all" m.redraw.strategy("all");

http://mithril.js.org/mithril.redraw.html策略

相关文章：