我正在尝试对数据列表进行排序并反射(reflect)更改,但如果我使用子组件来呈现内容,我的 View 不会刷新。
我的排序函数仅通过按钮的 onclick 调用:
m('button', {onclick: ctrl.sort}, 'sort'),
这是一个复制我的问题的 jsfiddle。第一个版本使用子组件进行渲染。 https://jsfiddle.net/4trL6y22/
ctrl.names.map(function(name){
return m(Hello, {who: name});
})
如果在没有子组件的情况下重写代码,则 View 会在排序发生后刷新: https://jsfiddle.net/4trL6y22/1/
ctrl.names.map(function(name){
return m('h1', name);
})
(我的真实案例更复杂,并且受益于子组件)。我缺少什么来将这种差异冒泡到页面上?
最佳答案
从代码片段来看,我认为您误解了 Controller 函数的运行方式。
Afaiu Controller 在创建组件时执行一次,但不会在后续差异中执行。 (一般来说,此声明的异常(exception)情况包括 key
更改时 (afaiu)。)
因此,将 options.who
直接放在 View 中比将其设置在组件的 Controller 中更可取(它使它成为一个纯组件,因此我认为它更可取的原因 - 意思是状态是在较少的地方维护),这解决了其中一个问题。
另一个问题是 names
属性在初始化时设置为 list
prop 的结果,但从未更新(尽管,如果进行了上述更改然后正确的功能出现发生了,因为 list
被更新了,因为 sort()
执行和就地排序——https://jsfiddle.net/bruce_one/1qpresbf/ 与 https://jsfiddle.net/bruce_one/m3c5rn92/ 演示了什么我正在尝试解释)。因此,不是在 Controller 中调用 prop,而是在 View 中检索值时调用它。
所以这两个更改(和一个 .slice(0)
使排序不可变(ish))变成:https://jsfiddle.net/bruce_one/4trL6y22/3/
(Afaict,这可以解决您的问题吗?)
关于javascript - Mithril.js:如果 View 使用子组件,则排序数据不会重新呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40074645/