how to compute 2 list based on a list's item's property in knockout?

Question

As a learning exercise, I have a todo list with to do items. In my view, I would like to display the items grouped by completion. Below is my viewmodel. How would I go about doing what I want to achieve, how do I setup the computed 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)
            ]),             
        ]);
    }

user3297291 · Answer 1 · 2016-07-26T09:35:29.600

Create a computed property in your TodoList viewmodel. Since the computed's method does not have any side effects, it's best to use a ko.pureComputed:
```
this.completedItems = ko.pureComputed(function() { /* ... */ }, this);
```

Note: the second this parameter sets the current this context as the "owner" of the computed. I.e.: within the computed's method, this refers to the TodoList instance.

Within the computed's method, evaluate the todoItems observable array to create a subscription to its values:
```
var currentItems = this.todoItems();
```

Filter the items by completed and return the array:

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

Now, every TodoList has a computed array of completed items. You could create a list of uncompleted items in similar fashion.

If you want to take it one step further and group completed items between lists, you can add a ko.pureComputed to your TodoListViewModel as well:

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

All code together:

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);
}

score 0 · Answer 2 · answered Jul 26 '16 at 09:33

You need to define computed 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 -->

how to compute 2 list based on a list's item's property in knockout?

2 Answers2