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

Question

我有一长串物品，我想在<ul>中展示。我想添加一个“过滤器”输入，因此用户可以将项目列表缩小到与过滤器匹配的项目。

我的控制器包含一个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())); 
      }) 
     ]) 
    ]); 
}; 

我的问题是，如何使update功能火灾时的filter值改变，使我得到物品的更新列表？

我需要定位两个oninput事件吗？一个更新filter和一个发射update？

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

还有其他吗？

Answer 1

当您使用m.withAttr时，您所说的是，当事件处理程序触发（oninput）时，您将获取元素（值）的某些属性并将其传递到您的第二个参数，这是一个函数（ctrl.filter）。您当前的事件序列：

1. 过滤器属性，都会更新
2. 秘重绘

你想要做什么，是调用更新功能（而不是的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); 
    ... 

现在会发生什么：

1. ctrl.filter属性，都会更新
2. ctrl.list系统会根据ctrl.filter过滤
3. 秘重绘

另一个处理这个问题的方法是在你的控制器/模型中没有任何“list”属性，而是让视图抓取一个过滤列表。毕竟只有一件事情真的发生了变化，那就是“过滤器”属性。过滤的列表是从中派生出来的，所以通过在控制器上创建另一个属性，可以有效地复制相同的状态。

此外，您可以保留m.withAttr（'value'，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())); 
      }) 
     ]) 
    ]); 
};