Как создать зависимость с 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 и обновить свойство filter в пределах его функции update?

Что-нибудь еще?

Answer 1

Когда вы используете m.withAttr, вы говорите, что когда обработчик события срабатывает (oninput), вы берете некоторый атрибут элемента (значения) и передаете его в свой второй аргумент, который является функцией (ctrl.filter). Ваша текущая последовательность событий:

1. свойства фильтра обновляется
2. мифрил перерисовывает

То, что вы хотите сделать, это вызвать функцию обновления (вместо/функции геттера сеттера 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 ('значение', 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())); 
      }) 
     ]) 
    ]); 
};