demos/can-component/list.html from bitovi/canjs

demos/can-component/list.html
Summary

Maintainability

Test Coverage

Issues
<body>
<div id='app'></div>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty"></script>
<script type='text/mustache' id='app-template'>
<todo-app>
    <todo-list todos="listOfTodos">
        <input type='checkbox' can-value="completed"/>
        {{ name }}
    </todo-list>
</todo-app>
</script>
<style>
    li.completed {
        text-decoration: line-through;
    }
</style>
<script type='text/mustache' id='todo-list-template'>
    <ul>
    {{# todos }}
        <li class="{{# completed }}completed{{/ completed }}">
            <content></content>
        </li>
    {{/ todos }}
    </ul>
    You’ve completed {{ completedTodos }} {{ plural "todo" completedTodos }}.
</script>
<script type='text/javascript'> 
steal("can/component", function() {

        can.Component.extend({
        tag: "todo-list",
        view: can.view("todo-list-template"),
        viewModel: {
            completedTodos: function(){
                var count = 0;
                this.attr('todos').each(function(todo){
                    if(todo.attr('completed')){
                        count++;
                    }
                })
                return count;
            }
        },
        helpers : {
            plural : function(singular, count){
                if(count() == 1){
                    return singular
                } else {
                    return singular+"s"
                }
                
            }
        }
    })
    
    can.Component.extend({
        tag: "todo-app",
        viewModel:{
            listOfTodos: new can.List([{name: "Take out trash", completed: true},
                            {name: "Mow Lawn", completed: false}])
        }
    })
    
    $("#app").html(can.view("app-template",{}))
})
</script>
</body>