can/view/bindings/doc/to-parent-function.html

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

<script type='text/stache' id='demo-html'>
	<my-tabs {^@add-panel}="@*addPanel">
	  <my-panel {add-panel}="@*addPanel" title="CanJS">CanJS Content</my-panel>
	  <my-panel {add-panel}="@*addPanel" title="StealJS">StealJS Content</my-panel>
	</my-tabs>
</script>
<script src="../../../node_modules/steal/steal.js" main="@empty"></script>
<script id="demo-source">
steal("can/component","can/view/stache",function(){
	
can.Component.extend({
	tag: "my-tabs",
	template: 	
		can.stache("<ul>"+
			// Create an LI for each item in the panel's viewModel object
    		"{{#panels}}"+
    			"<li {{#isActive}}class='active'{{/isActive}} "+
    			    "($click)='makeActive(.)'>"+
    			  "{{title}}"+
    			"</li>"+
    		"{{/panels}}"+
    	"</ul>"+
    	"<content></content>"),
	viewModel: {
		// Contains a list of all panel scopes within the
		// tabs element.
		panels: [],
		// When a `<panel>` element is inserted into the document,
		// it calls this method to add the panel's viewModel to the
		// panels array.
		addPanel: function(panel){
			// If this is the first panel, activate it.
			if( this.attr("panels").length === 0 ) {
				this.makeActive(panel);
			} 
			this.attr("panels").push(panel);
		},
		// When a `<panel>` element is removed from the document,
		// it calls this method to remove the panel's viewModel from
		// the panels array.
		removePanel: function(panel){
			var panels = this.attr("panels");
			can.batch.start();
			panels.splice(panels.indexOf(panel),1);
			// if the panel was active, make the first item active
			if(panel === this.attr("active")){
				if(panels.length){
					this.makeActive(panels[0]);
				} else {
					this.removeAttr("active");
				}
			}
			can.batch.stop()
		},
		makeActive: function(panel){
			this.attr("active",panel);
			this.attr("panels").each(function(panel){
				panel.attr("active", false)
			});
			panel.attr("active",true);
			
		},
		// this is viewModel, not mustache
		// consider removing viewModel as arg
		isActive: function( panel ) {
			return this.attr('active') == panel
		}
	}
});

can.Component.extend({
	template: can.stache("{{#if active}}<content></content>{{/if}}"),
	tag:"my-panel",
	viewModel: {
		active: false,
		init: function(){
			this.attr("addPanel")(this);
		}
	}
});



$(document.body).html( can.view("demo-html",{

}));


});
</script>