I am trying to iterate over an array in Ember and remove objects from the array with removeObject(). The example below only removes some objects from the array. I would expect it to iterate over all objects and then remove them:

App = Ember.Application.create();



App.ITEM_FIXUTRES = [

  'Item 1',

  'Item 2'

];



App.ITEM_FIXTURES = App.ITEM_FIXUTRES.map(function (item) {

  return Ember.Object.create({title: item});

});



App.IndexRoute = Ember.Route.extend({

  model: function() {

    return App.ITEM_FIXTURES;

  },



  actions: {

    add: function(title) {

      var items = this.modelFor('index');

      items.addObject(Ember.Object.create({title: title}));



      this.controller.set('title', '');

    },

    removeAll: function() {

      var items = this.modelFor('index');



      items.forEach(function (item) {

        // I actually only want to remove certain objects with specific

        // properties but this illustrates the issue.

        items.removeObject(item);

      });

    }

  }

});

The template is fairly straightforward:

<script type=text/x-handlebars id=index>

  <h4>Collection List</h4>



  <button {{action 'removeAll'}}>Remove All</button>



  <ul>

    {{#each}}

      <li>{{title}}</li>

    {{/each}}



    <li>{{input type='text' value=title action='add'}}</li>

  </ul>

</script>

Here is a JSBin: http://jsbin.com/kelinime/4/edit