javascript - Mithril.js:如果 View 使用子组件，则排序数据不会重新呈现

Question

我正在尝试对数据列表进行排序并反射(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);
})

(我的真实案例更复杂，并且受益于子组件)。我缺少什么来将这种差异冒泡到页面上？

Answer 1

从代码片段来看，我认为您误解了 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，这可以解决您的问题吗？)