CanJS - Todo

canjs

<todos-app>
<h2>Todays to-dos</h2>
{{#selectedTodo}}
    <input type="text"
        can-value="description"
        can-change="save">
{{/selectedTodo}}
<ul>
    {{#each todos}}
    <li>
        <input type="checkbox"
            can-value="complete">
        <span class="{{#if complete}}done{{/if}}"
            can-click="select">
        {{description}}
        </span>
        <button can-click="destroy"></button>
    </li>
    {{/each}}
</ul>
</todos-app>

var Todo = can.Model.extend({
    findAll: 'GET /todos',
    findOne: 'GET /todos/{id}',
    update: 'PUT /todos/{id}',
    destroy: 'DELETE /todos/{id}'
}, {});

can.Component.extend({
    tag: 'todos-app',
    scope: {
        selectedTodo: null,
        todos: new Todo.List({}),
        select: function(todo){
            this.attr('selectedTodo', todo);
        },
        save: function(todo) {
            todo.save();
            this.removeAttr('selectedTodo');
        }
    }
})
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License