ItemController, Computed Props

The latest build of Ember.

by fangyang

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="alerts">
    <ul>
        {{#each itemController="alert"}}
            {{view App.AlertView}}
        {{/each}}   
    </ul>
    <!-- the numSelected property does not seem to be updating properly -->
    <h1>Number of Selected Alerts: {{numSelected}}</h1>
</script>

<script type="text/x-handlebars" data-template-name="alert">                 
    {{id}} - {{description}}    
    {{#if isSelected}}
        <span style="float:right">Selected</span>
    {{/if}}
</script>

CSS

li{background-color: #aaa;padding:3px; margin-bottom: 10px; cursor:pointer; width:200px}

JavaScript

//http://stackoverflow.com/questions/19216478/ember-js-1-0-0-computed-property-in-parent-controller-based-on-child-itemcontro

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('alerts');
  }
});

App.Router.map(function() {
  this.resource('alerts');
});

App.AlertsRoute = Ember.Route.extend({
  model: function(){
      return [
          {id: 1, description: 'Foo'},
          {id: 2, description: 'Bar'},
          {id: 3, description: 'Yup'}
      ];
  }   
});

App.AlertsController = Ember.ArrayController.extend({
    itemController: 'Alert',
    // This property is only computed on page load but does not refresh
    // when the isSelected property of an alert is changed
	numSelected: function(){
		return this.filterProperty('isSelected', true).get('length');
	}.property('@each.isSelected')       
});

App.AlertController = Ember.ObjectController.extend({
  //isSelected : false,
});

App.AlertView = Ember.View.extend({
	templateName: 'alert',
	tagName: 'li',
    click : function(){
        this.toggleProperty('controller.isSelected');
        console.info("Selected value for " + this.get('controller.id') + " is: " + this.get('controller.isSelected'));
    }
});