can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
54 lines (40 loc) • 1.27 kB
HTML
<div id="app"></div>
<script src="../../node_modules/steal/steal.js" main="@empty"></script>
<script type="text/mustache" id="info-template">
<button toggle="showing">
{{#if showing}}Hide{{else}}Show{{/if}} more info</button>
<div fade-in-when="showing">
Here is more info!
</div>
</script>
<script>
steal("can/view/mustache", "can/view/bindings",function(){
can.view.attr("toggle", function(el, attrData){
var attrValue = el.getAttribute("toggle")
toggleCompute = attrData.scope.compute(attrValue);
$(el).click(function(){
toggleCompute(! toggleCompute() )
})
})
can.view.attr("fade-in-when", function( el, attrData ) {
var attrValue = el.getAttribute("fade-in-when");
fadeInCompute = attrData.scope.compute(attrValue),
// handler for when the compute changes
handler = function(ev, newVal, oldVal){
if(newVal && !oldVal) {
$(el).fadeIn("slow")
} else if(!newVal){
$(el).hide()
}
}
fadeInCompute.bind("change",handler);
handler( {}, fadeInCompute() , undefined);
$(el).bind("remove", function(){
fadeInCompute.unbind(handler);
});
})
$("#app").html( can.view("info-template",{
showing: can.compute(false)
}) )
});
</script>