0

作为一个学习练习，我有一个待办事项列表。在我看来，我想显示按完成分组的项目。下面是我的视图模型。我将如何去做我想要实现的目标，如何设置计算的 observables？

         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)
            ]),             
        ]);
    }
4

2 回答 2

1

  1. 在您的视图模型中创建一个计算属性TodoList。由于计算的方法没有任何副作用，因此最好使用 a ko.pureComputed：

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

注意：第二个this参数将当前this上下文设置为计算的“所有者”。即：在计算的方法中，this指的是TodoList实例。

  1. 在计算的方法中，评估todoItems可观察数组以创建对其值的订阅：

    var currentItems = this.todoItems();

  2. 过滤项目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);
}
于 2016-07-26T09:28:05.880 回答
0

您需要定义计算的 observable：

    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 -->

于 2016-07-26T09:33:20.680 回答