can/view/doc/fade_in_when.html

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

<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>