如何使用Mithril.js创建依赖关系？

Question

我有一个很长的列表，上面列出了我想在<ul>中显示的项目。我想添加一个" filter“输入，这样用户就可以将条目列表缩小到与过滤器匹配的条目。

我的控制器包含一个filter属性和一个list数组：

function Ctrl() {
    this.filter = m.prop('');
    this.list = [];
}

我已经向控制器添加了一个update方法，该方法查看filter属性并更新list数组的内容：

Ctrl.prototype.update = function (value) {
    var _this = this;
    if (this.filter()) {
        searchItems(this.filter(), function (items) {
          _this.list = items;
        });
    } else {
        this.list = [];
    }
};

最后，我的视图遍历list数组并呈现项目。此外，它还在顶部显示绑定到filter属性的输入：

var view = function (ctrl) {
    return m('#content', [
        m('input', { 
             oninput: m.withAttr("value", ctrl.filter), 
             value: ctrl.filter() 
        }),
        m('ul', [
            ctrl.list.map(function (item, idx) {
                return m('li', m('span', item.getName()));
            })
        ])
    ]);
};

我的问题是，如何在filter的值更改时触发update函数，以便获得更新的项目列表？

我是否需要定位两个oninput事件？一个用于更新filter，另一个用于触发update

我是否应该使用单个oninput事件并更新update函数中的filter属性？

还要别的吗？

Answer 1

当您使用m.withAttr时，您的意思是当事件处理程序触发(oninput)时，您将获取元素的某些属性(值)，并将其传递给第二个参数，即函数(ctrl.filter)。您当前的事件顺序：

重绘过滤器属性获取updated

• mithril

您要做的是调用更新函数(而不是getter/setter ctrl.filter函数)，并绑定它，这样您就可以在函数中保留适当的上下文：

m('input', {
  oninput: m.withAttr("value", ctrl.update.bind(ctrl)), 
  value: ctrl.filter() 
}),

然后，在更新函数中，值将被传递给函数，您可以在那里设置它。

Ctrl.prototype.update = function (value) {
  this.filter(value);
  ...

接下来会发生什么：

根据ctrl.filter

• mithril

1. ctrl.filter

获得重绘过滤属性

处理这个问题的另一种方法是在你的控制器/模型中没有任何" list“属性，而是让视图获取一个过滤过的列表。毕竟，只有一件事是真正改变的，那就是"filter“属性。过滤后的列表就是从那里派生出来的，因此通过在控制器上创建另一个属性，您可以有效地复制相同的状态。

此外，您可以保留值(‘m.withAttr’，ctrl.filter)，并从这种简单性中受益。

类似于：

var filteredItems = ctrl.getFilteredItems();
var view = function (ctrl) {
    return m('#content', [
        m('input', { 
             oninput: m.withAttr("value", ctrl.filter), 
             value: ctrl.filter() 
        }),
        m('ul', [
            filteredItems.map(function (item, idx) {
                return m('li', m('span', item.getName()));
            })
        ])
    ]);
};