title: How do you filter the content collection of an ArrayController in Ember.js using a checkbox in a view?
body: <p>I am using the latest code for both Ember and Ember-Data. I have rails as my backend supplying JSON, which is working fine. I want to be able to filter on the "active" property of the Ember model using a checkbox in my view. I want the checkbox to only show the data that is active=true if I check the checkbox. I do NOT want to delete the data from the array, only HIDE the data. This is what I have currently, but it is not working.</p>
  
  <p>Model:</p>
  
  <pre><code>App.Org = DS.Model.extend({
      code: DS.attr('string', { defaultValue: 'N/A' }),
      name: DS.attr('string', { defaultValue: 'N/A' }),
      source: DS.attr('string', { defaultValue: 'N/A' }),
      status: DS.attr('string', { defaultValue: 'N/A' }),
      type: DS.attr('string', { defaultValue: 'N/A' }),
      note: DS.attr('string', { defaultValue: 'N/A' }),
      financial_Flag: DS.attr('string', { defaultValue: 'N/A' }),
      expense_Flag: DS.attr('string', { defaultValue: 'N/A' }),
      revenue_Flag: DS.attr('string', { defaultValue: 'N/A' }),
      created_At: DS.attr('string', { defaultValue: 'N/A' }),
      updated_At: DS.attr('string', { defaultValue: 'N/A' }),
  
      active: function() {
          var status = this.get('status');
          var active = (status === 0) ? false : true;
          console.log("status: " + status + " | active: " + active);
          return active;
      }.property('status')
  
  }).reopenClass({
      collectionUrl: '/orgs',
      resourceUrl: '/orgs/%@',
      resourceName: 'org'
  });
  </code></pre>
  
  <p>ArrayController:</p>
  
  <pre><code>App.OrgsController = Em.ArrayController.extend({
  
      isEmpty: function() {
          console.log("############ App.OrgsController.isEmpty called");
          return this.get('length') === 0;
      }.property('length'),
  
      toggleActive: function(){
          console.log("############ App.OrgsController.isActive called");
          return this.filterProperty('active', value).forEach(this.removeObject, this);
      }.property('@each.active'),
  
      init: function() {
          this.set('content', App.store.findAll(App.Org));
      },
  
      refreshOrgs: function() {
          this.set('content', App.store.findAll(App.Org));
      },
  
      getInactiveOrgs: function(){
          this.set('content', App.store.find(App.Org, {status: "0"}));
      }
  });
  </code></pre>
  
  <p>In my view I have:</p>
  
  <pre><code>&lt;label&gt;
      isActive
      {{view Ember.Checkbox checkedBinding="App.OrgsController.toggleActive" disabledBinding="App.OrgsController.isEmpty" }}
  &lt;/label&gt;
  </code></pre>