CanJS sub-component binding

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by bobbyross

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>
<script src="http://canjs.us/release/latest/can.object.js"></script>
<script src="http://canjs.us/release/latest/can.ejs.js"></script>
<script src="http://canjs.us/release/latest/can.map.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.map.backup.js"></script>
<script src="http://canjs.us/release/latest/can.map.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.map.setter.js"></script>
<script src="http://canjs.us/release/latest/can.map.validations.js"></script>
<script src="http://canjs.com/release/latest/can.fixture.js"></script>
<script src="http://canjs.com/release/latest/can.stache.js"></script>
<div id="out"></div>
<script id="app-stache" type="text/stache">
 	<app>
 			{{#data}}
         <item-view {item}=".">
         </item-view>
       {{/data}}
  </app>
</script>

<script id="item-view" type="text/stache">
			{{item.name}}
      {{#item.children}}
      	<div>{{@index}} - <i>Not sure why this is NaN?</i></div>
        <item-view {item}="."></item-view>
        <!-- When calling item again within self parent instance get "too much recursion".
        This shoudl -->
      {{/item.children}}
</script>

JavaScript

can.Component.extend({
  tag: "app",
  viewModel: {
    define: {    
     	data: {
      		get: function() {
          	return data;
          }
      }
    }
  }
});
//  Too be called to display items in a heirarchy
can.Component.extend({
  tag: "item-view",
  template: can.view('item-view')
});

// Some sample data
 var data = [{
         name: "Parent 1",
         id: 1,
         children: [
              { name: "Child 1", id: 2 },
              { name: "Child 2", id:3 }
         ]
    },
    {
    	name: "Parent 2",
      id: 4,
      children: []
    }];
$("#out").html(can.view("app-stache", {}))