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

标签 javascript mithril.js

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

相关文章:

javascript - 按键时使用 Ember 操作第一个字符为空

javascript - 通过javascript创建一个div框

javascript - Rails 3.1 堆栈级别太深

javascript - 如何用 mithril 等价物替换 jquery?

javascript - Mithril.js - getScript

javascript - JS/CSS : Moving span in an animated way

javascript - 预览 html 页面而不打开它

sass - compass 不适用于 Mithril 自耕农发电机

javascript - Mithril.js 具有多个 GET 请求

angularjs - Mithril 与 angularjs