0

我有一长串想要在<ul>. 我想添加一个“过滤器”输入，以便用户可以将项目列表缩小到与过滤器匹配的项目。

我的控制器包含一个filter道具和一个list数组：

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

我update在控制器中添加了一个方法，它查看filterprop 并更新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？

Should I use a single oninput event and update the filter property within he update function?

Anything else?

4

1 回答 1

0

当您使用 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. 秘银重绘

另一种处理方法是在控制器/模型中没有任何“列表”属性，而是让视图获取过滤列表。毕竟只有一件事真正发生了变化，那就是“过滤器”属性。过滤列表由此派生，因此通过在控制器上创建另一个属性，您实际上是在复制相同的状态。

此外，您可以保留 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()));
            })
        ])
    ]);
};
于 2015-12-08T08:19:44.423 回答