CanJS Model compute in view

by manoj

HTML

<script src="//canjs.com/release/1.1.7/can.jquery.js"></script>
<script src="//canjs.com/release/1.1.7/can.view.mustache.js"></script>
<div id="app"></div>
  <script type="text/mustache" id="template">
    	<h2>{{state.title}}</h2>
        <p>Subtitle</p>
        <ul>	
          	{{#items}}
              	<li><a {{data 'item'}} href="javascript://">{{name}}</a></li>
            {{/items}}
    	</ul>
        {{#if state.current}}
    	        {{state.current.name}}
          	{{state.current.isAdult}}
      {{/if}}
  </script>

JavaScript

var Model = can.Model({
}, {
    isAdult: function () {
        	return this.age > 17;
    }
});

var Control = can.Control({
  init: function (ele, ops) {
    
    this.state = new can.Observe({
    	title: 'HELLO',
    	current: null
  	})
  	  	
    this.items = new Model.List([{name: 'J', age: 16}, {name: 'C', age: 21}]);
    
  	var view = can.view('template', {items: this.items, state: this.state});

  	this.element.append(view);
    console.log('done init');
   },
 
  
  'a click': function (el, ev) {
    console.log('click');
     var item = can.data(el, 'item') ;
    console.log(item);
    this.state.attr('current', item);
  }
})

var control = new Control($('#app'));