Question

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

我的排序功能只需按一下按钮即可点击：

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

（我的现实案例更复杂，并且受益于子组件）。我错过了把这种差异搞砸到页面上的东西？

Answer 1

通过查看代码段，我认为您误解了控制器功能的运行方式。

Afaiu控制器在创建组件时执行一次，但在后续差异中不执行。（一般来说，此声明的例外情况包括key更改时间（afaiu）。）

因此，将options.who直接放在视图中比将其设置在组件的控制器中更好（它使它成为一个纯组件，因此我认为它更为可取 - 意味着维持状态在较少的地方）解决了其中一个问题。

另一个问题是names属性设置为初始化时list道具的结果，但永远不会更新（尽管如果上面提到的更改是正确的功能出现，因为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/

（Afaict，这是解决你的问题吗？）

Answer 2

我不确定这是否是解决问题的最佳方法，但您可以将重绘策略设置为＆＃34; all＆＃34; lastfirst()

http://mithril.js.org/mithril.redraw.html#strategy

Mithril.js：如果视图使用子组件，则排序数据不会重新呈现

2 个答案: