如何根據列表中項目的屬性在淘汰賽中計算2個列表？

Question

作爲一種學習練習，我有一個todo list來做項目。在我看來，我想顯示按完成分組的項目。以下是我的viewmodel。我將如何去做我想達到的目標，我如何設置計算出來的觀測值？

  function TodoList(name, items) { 
     this.name = ko.observable(name === "undefined"? "": name); 
     this.todoItems = ko.observableArray(typeof (items) !== "undefined" ? items : []); 
    } 

    function TodoItem(name,completed) { 
     this.name = ko.observable(name === "undefined" ? "" : name); 
     this.completed = ko.observable(completed === "undefined" ? false : completed); 
    } 

    function TodoListViewModel() { 
     var self = this; 
     self.todoLists = ko.observableArray([ 

      new TodoList("Groceries", [ 
       new TodoItem("Milk", true), 
       new TodoItem("Bread",false), 
       new TodoItem("Tissues",false) 
      ]), 
      new TodoList("Luggage", [ 
       new TodoItem("Hairdryer", false), 
       new TodoItem("Toothbrush",false) 
      ]),    
     ]); 
    } 

Answer 1

1. 創建您的視圖模型TodoList一個計算性能。由於計算的方法沒有任何副作用，最好使用ko.pureComputed：

   this.completedItems = ko.pureComputed(function() { /* ... */ }, this); 
   

注：第二this參數設置當前this上下文的計算出的「所有者」。即：在計算的方法中，this是指TodoList實例。

在所計算的方法，評價todoItems觀察的陣列創建預訂，以它的值：

var currentItems = this.todoItems(); 

篩選的物品通過completed並返回數組：

return currentItems.filter(function(item) { 
    return item.completed(); 
}); 

現在，每TodoList具有結束於的一個計算陣列編輯項目。您可以用類似的方式創建未完成項目的列表。

如果你想要把它一步，集團完成列表之間的項目，你可以添加一個ko.pureComputed您TodoListViewModel還有：

this.allCompletedItems = ko.pureComputed(function() { 
    return this.todoLists() 
    .map(function(todoList) { return todoList.completedItems(); }) 
    .reduce(function(result, itemList) { return result.concat(itemList); }, []); 
}, this); 

所有代號：

function TodoList(name, items) { 
    this.name = ko.observable(name === "undefined" ? "" : name); 
    this.todoItems = ko.observableArray(typeof(items) !== "undefined" ? items : []); 

    this.completedItems = ko.pureComputed(function() { 
    return this.todoItems() 
     .filter(function(item) { 
     return item.completed(); 
     }); 
    }, this); 
} 

function TodoItem(name, completed) { 
    this.name = ko.observable(name === "undefined" ? "" : name); 
    this.completed = ko.observable(completed === "undefined" ? false : completed); 
} 

function TodoListViewModel() { 
    this.todoLists = ko.observableArray([ 
    new TodoList("Groceries", [ 
     new TodoItem("Milk", true), 
     new TodoItem("Bread", false), 
     new TodoItem("Tissues", false) 
    ]), 
    new TodoList("Luggage", [ 
     new TodoItem("Hairdryer", false), 
     new TodoItem("Toothbrush", false) 
    ]), 
    ]); 

    this.allCompletedItems = ko.pureComputed(function() { 
    return this.todoLists() 
     .map(function(todoList) { 
     return todoList.completedItems(); 
     }) 
     .reduce(function(result, itemList) { 
     return result.concat(itemList); 
     }, []); 
    }, this); 
} 

Answer 2

你需要定義計算的觀測值：

self.completedItems = ko.computed(function() { 
     return self.todoLists().reduce(function(result, list) { 
     return result.concat(list.todoItems().filter(function(i) { return i.completed(); })); 
     }, []); 
    }); 

  function TodoList(name, items) { 
 
     this.name = ko.observable(name === "undefined"? "": name); 
 
     this.todoItems = ko.observableArray(typeof (items) !== "undefined" ? items : []); 
 
    } 
 

 
    function TodoItem(name,completed) { 
 
     this.name = ko.observable(name === "undefined" ? "" : name); 
 
     this.completed = ko.observable(completed === "undefined" ? false : completed); 
 
    } 
 

 
    function TodoListViewModel() { 
 
     var self = this; 
 
     self.todoLists = ko.observableArray([ 
 

 
      new TodoList("Groceries", [ 
 
       new TodoItem("Milk", true), 
 
       new TodoItem("Bread",false), 
 
       new TodoItem("Tissues",false) 
 
      ]), 
 
      new TodoList("Luggage", [ 
 
       new TodoItem("Hairdryer", true), 
 
       new TodoItem("Toothbrush",false) 
 
      ]),    
 
     ]); 
 
      
 
     self.completedItems = ko.computed(function() { 
 
      return self.todoLists().reduce(function(result, list) { 
 
      return result.concat(list.todoItems().filter(function(i) { return i.completed(); })); 
 
      }, []); 
 
     }); 
 
    } 
 
    
 
    ko.applyBindings(new TodoListViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<!-- ko foreach: completedItems --> 
 
<div data-bind="text: name"></div> 
 
<!-- /ko -->