如何使用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())); 
      }) 
     ]) 
    ]); 
};