Define Todo List page

The problem

• Define a Todo.List type on the export of models/todo.js, where:
  • It is a DefineList type.
  • The enumerable indexes are coerced into Todo types.
  • Its .active property returns a filtered Todo.List of the todos that are not complete.
  • Its .complete property returns a filtered Todo.List of the todos that are complete.
  • Its .allComplete property true if all the todos are complete.

Example test code:

QUnit.ok(Todo.List, "Defined a List");
const todos = new Todo.List([
  {complete: true},
  {},
  {complete: true}
]);
QUnit.ok(todos[0] instanceof Todo, "each item in a Todo.List is a Todo");
QUnit.equal(todos.active.length, 1);
QUnit.equal(todos.complete.length, 2);
QUnit.equal(todos.allComplete, false, "not allComplete");
todos[1].complete = true;
QUnit.equal(todos.allComplete, true, "allComplete");

What you need to know

• DefineList Basics Presentation

• DefineList.extend defines a new ListType.

• The # property defines the behavior of items in a list like:

  DefineList.extend({
      "#": {type: ItemType}
  })
  

• The get behavior defines observable computed properties like:

  DefineMap.extend({
      propertyName: {
          get: function() {
              return this.otherProperty;
          }
      }
  })
  

• filter can be used to filter a list into a new list:

  list = new ListType([
    // ...
  ]);
  list.filter(function(item) {
      return test(item);
  })
  

The solution

// models/todo.js
import {DefineMap, DefineList} from "can";

const Todo = DefineMap.extend("Todo", {
    id: "string",
    name: "string",
    complete: {
        type: "boolean",
        default: false
    },
    toggleComplete() {
        this.complete = !this.complete;
    }
});

Todo.List = DefineList.extend("TodoList", {
    "#": Todo,
    get active() {
        return this.filter({
            complete: false
        });
    },
    get complete() {
        return this.filter({
            complete: true
        });
    },
    get allComplete() {
        return this.length === this.complete.length;
    }
});

export default Todo;