can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
67 lines (63 loc) • 1.41 kB
HTML
<body>
<style>
.selected {
background-color: yellow;
}
div {
cursor: pointer;
}
</style>
<div id="html">
<div id='out'></div>
<script type="text/mustache" id="listMustache">
{{#items}}
<div {{#isSelected}}class='selected'{{/isSelected}}
can-click='toggle'>
{{title}}
</div>
{{/items}}
</script>
</div>
<script src="../../node_modules/steal/steal.js" main="@empty"></script>
<script>
DEMO_HTML = document.getElementById("html").innerHTML;
</script>
<script type='text/javascript'>
steal("can/component", function() {
can.Component.extend({
tag: "my-items",
viewModel: {
selected: [],
toggle: function(item){
var selected = this.attr('selected'),
index = selected.indexOf(item);
if( index >= 0 ) {
selected.splice(index, 1);
} else {
selected.push(item);
}
}
},
template: can.view("listMustache"),
helpers: {
isSelected: function(options){
if( this.attr("selected").indexOf(options.context) >=0 ) {
return options.fn();
} else {
return options.inverse();
}
}
}
})
$("#out").html(can.view.mustache("<my-items/>")({
items: new can.List([
{ title: "CanJS" },
{ title: "jQuery++" },
{ title: "FuncUnit" },
{ title: "DocumentJS" },
{ title: "JavaScriptMVC" }
])
}))
})
</script>
</body>