can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
69 lines (57 loc) • 1.94 kB
HTML
<div id="app"></div>
<script src="../node_modules/steal/steal.js" main="@empty"></script>
<script type="text/mustache" id="info-template">
<input type='radio' can-value="toggling" value="moreInfoShowing"/> moreInfoShowing</br>
<input type='radio' can-value="toggling" value="moreInfoVisible"/> moreInfoVisible</br>
<button can-click="toggle">Toggle {{toggling}}</button>
<div fade-in-when="{{toggling}}">
More Info
</div>
</script>
<script>
steal("can/view/mustache", "can/view/bindings",function(){
can.view.attr("fade-in-when", function( el, attrData ) {
var fadeInCompute,
// handler for when the compute changes
handler = function(ev, newVal, oldVal){
if(newVal && !oldVal) {
$(el).fadeIn("slow")
} else if(!newVal){
$(el).hide()
}
}
teardownComputeBinding = function(){
fadeInCompute && fadeInCompute.unbind(handler)
},
setupComputeBinging = function(){
var attrValue = el.getAttribute("fade-in-when");
fadeInCompute = attrData.scope.computeData(attrValue).compute;
console.log("Listening to ", attrValue, "in the scope")
fadeInCompute.bind("change",handler);
handler( {}, fadeInCompute() , undefined);
}
$(el).bind("attributes", function(ev){
if( ev.attributeName == "fade-in-when" ) {
teardownComputeBinding();
// fadeInWhen might have been removed
if( el.getAttribute("fade-in-when") ) {
setupComputeBinging();
}
}
}).bind("remove", function(){
teardownComputeBinding && teardownComputeBinding();
})
setupComputeBinging()
})
var toggles = {
toggling: can.compute("moreInfoShowing"),
moreInfoShowing: can.compute(true),
moreInfoVisible: can.compute(false),
toggle: function(){
var compute = toggles[toggles.toggling()];
compute(!compute())
}
};
$("#app").html( can.view("info-template",toggles) )
})
</script>