can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
67 lines (63 loc) • 1.38 kB
HTML
<body>
<div id='app'></div>
<script src="../../node_modules/steal/steal.js" 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",
template: 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>