Connection List page

List todos from the service layer (can-connect use)

The problem

Get all todos from the service layer using the "connected" Todo type.

What you need to know

  • The can-connect Presentation up to and including Important Interfaces.

  • Map.getList gets data using the connection’s getList and returns a promise that resolves to the list of instances:

    Map.getList({}).then(function(list) {

})

  • An async getter property behavior can be used to "set" a property to an initial value:

    property: {
    get: function(lastSet, resolve) {
        SOME_ASYNC_METHOD( function callback(data) {
            resolve(data);
        });
    }
}

The solution

Click to see the solution

Update index.js to the following:

// index.js
import {Component} from "can";
import view from "./index.stache";
import Todo from "~/models/todo";
import "~/models/todos-fixture";
import test from "can-todomvc-test";

Component.extend({
    tag: "todo-mvc",
    view,
    ViewModel: {
        appName: {default: "TodoMVC"},
        todosList: {
            get: function(lastSet, resolve) {
                Todo.getList({}).then(resolve);
            }
        }
    }
});

const appVM = window.appVM = document.querySelector("todo-mvc").viewModel;

test(appVM);