Ember.js route problems with filter

Question

My aim is to pass filtered data to my controller and then to my template. I've tried not using the filter and everything works as expected. If I even try to use a filter that lets everything through, I don't get any data. I've even tried using false instead of true and fiddling with the argument list of the filter.

I'm using ember-data fixtures to test this. I'm following the name conventions so much of the work is done for me under the hood. That all seems to be working though (otherwise the first example should also have a problem).

Works (arrives in the controller and eventually gets rendered on the page):

App.DomainDirRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('domain_dir');
  }
});

Fails (controller gets an empty array):

App.DomainDirRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.filter('domain_dir', function(item){
        return true;
    });
  }
});

UPDATE (ATTEMPT 1):

Okay, so I've tried a couple of things based on Sam Selikoff's answer. I've defined 4 properties (2 filters, one map, one plain copy) in the controller and tried to display each in the mockup page. Only the property copyDomain gives a result.

Properties in controller:

filteredDomains: Ember.computed.filterBy('domain', 'domain', true),
upperCaseDomains: Ember.computed.map('domain', function(domain, index) {
    return domain.toUpperCase() + '!';
  }),
filteredDomains2: function() {
    return this.get("model").filterBy('domain', true);
  }.property('[email protected]'),
copyDomains: function(){
    result = [];
    this.forEach(function(item) {
        result.pushObject(item);
    })
    console.log(result);
    return result;
}.property('[email protected]')

Mockup:

        <ul>
            <li>filteredDomains</li>
        {{#each domainDir in controller.filteredDomains}}
            <li>domainDir.domain</li>
        {{/each}}
        </ul>
        <ul>
            <li>filteredDomains2</li>
        {{#each domainDir in controller.filteredDomains2}}
            <li>domainDir.domain</li>
        {{/each}}
        </ul>
        <ul>
            <li>upperCaseDomains</li>
        {{#each domainDir in controller.upperCaseDomains}}
            <li>domainDir.domain</li>
        {{/each}}
        </ul>
        <ul>
            <li>copyDomains</li>
        {{#each domainDir in controller.copyDomains}}
            <li>domainDir.domain</li>
        {{/each}}
        </ul>

Sam Selikoff Sam Selikoff · Accepted Answer · 2015-03-26T15:46:21

Filtering is generally done at the controller/component level. store.find makes an AJAX request. Is your goal to only retrieve the filtered subset of data from the server, or to filter the data you already have at the view layer?

Typically if you're just wanting to do some live filtering, you'll do it in the controller. Leave your model hook as this.store.find('domain_dir') and add a filter in your controller:

App.DomainDirController = Ember.Controller.extend({
  filteredDomains: function() {
    return this.get("model").filterBy('someProp', true);
  }.property('[email protected]')
});

You should also check out the computed macros for some shorthands:

App.DomainDirController = Ember.Controller.extend({
  filteredDomains: Ember.computed.filterBy('model', 'someProp');
});

Now in your template, you can do

{{#each domain in filteredDomains}}
  ...

Ember.js route problems with filter

1 Answers