UNPKG

can

Version:

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

54 lines (40 loc) 1.27 kB
<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>