Ember.js and selecting multiple models for deleting

Question

In ember.js documentation i've found next:

controllers allow you to decorate your models with display logic. In general, your models will have properties that are saved to the server, while controllers will have properties that your app does not need to save to the server.

I'm trying to add "selecting" functionality to my application.

Here is jsfiddle: http://jsfiddle.net/JWf7X/

Seems that filter property is filtering by model, not by controller (because the console.log is empty).

this.filterProperty('isSelected', true); //managing models

How can i write removeSelected action correctly?

Is the correct way to storing "isSelected" in controller? I think adding isSelected for model is not the right way, because this property will not load from server via REST API and will not be save to it.

application.js:

window.App = Ember.Application.create();
App.ApplicationAdapter = DS.FixtureAdapter.extend();



App.Test = DS.Model.extend({
  title: DS.attr('string'),
});


App.Test.FIXTURES = [
 {
   id: 1,
   title: 'Learn Ember.js',
 },
 {
   id: 2,
   title: '...',
 },
 {
   id: 3,
   title: 'Profit!',
 }
];

App.IndexRoute = Ember.Route.extend({
  model: function () {
    return this.get('store').find('test');
  }
});

App.IndexController = Ember.ArrayController.extend({
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  },

});

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

index.html:

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each itemController="test"}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

Answer 1

Looking the source, using the itemController , in the each view helper. Will create a new array controller instead of use your IndexController . So isSelected will not be present inside of IndexController .

If you set the itemController into App.IndexController you will get this working:

indexController:

App.IndexController = Ember.ArrayController.extend({
  itemController: "test",
  actions: {
      removeSelected: function () {
        var selected = this.filterProperty('isSelected', true);
        console.log(selected);
      }
  }
});

index.html:

<script type="text/x-handlebars" data-template-name="index">
    <button {{action "removeSelected"}}>remove selected</button>
    <ul>
      {{#each}}
        <li>
          {{input type="checkbox" checked=isSelected}}
          <label>{{title}}</label>
        </li>
      {{/each}}
    </ul>
</script>

This is a updated fiddle with this working http://jsfiddle.net/marciojunior/BKUyk/