Filter models by related model (hasMany) - ember.js

Question

I have a list of products with related tags. I want to filter the list to only show products that have the specified tag:
App.Product = DS.Model.extend({
tags: DS.hasMany('Tag', { async: true }),
name: DS.attr( 'string' )
});
App.Tag = DS.Model.extend({
name: DS.attr('string')
});
App.ProductsTaggedRoute = Ember.Route.extend({
model: function(params) {
var store = this.store;
return store.find('product').then(function() {
store.filter('product', function(product, index, enumerable) {
var match = false;
product.get('tags').then(function(tags) {
tags.forEach(function(tag) {
if(tag.get('name') === 'Tag 1') {
console.log(product.get('name') + ' true');
match = true;
} else {
console.log(product.get('name') + ' false', tag.get('name'));
}
});
});
return match;
});
});
}
});
App.Product.FIXTURES = [
{ id: 1, tags: [1,2,3], name: "test 1" },
{ id: 2, tags: [3], name: "test 2" },
{ id: 3, tags: [2,1], name: "test 3" },
{ id: 4, tags: [], name: "test 4" }
];
App.Tag.FIXTURES = [
{ id: 1, name: "Tag 1" },
{ id: 2, name: "Tag 2" },
{ id: 3, name: "Tag 3" },
{ id: 4, name: "Tag 4" }
];
The output is:
test 2 false undefined
test 3 false undefined
test 3 false undefined
test 1 true
test 1 false Tag 2
test 1 false Tag 3
I don't understand why the first three are undefined? Also, I don't get any output in the template so it seems like the filter function isn't right:
{{#each controller}}
{{ name }}
{{/each}}

Answer 1

You'll need to make sure the records are resolved before using the filter on it. This is a perfect use case for promises. You return a promise, and control what's resolved and when.
http://emberjs.jsbin.com/OxIDiVU/84/edit
model: function(params) {
var store = this.store;
return new Em.RSVP.Promise(function(resolve){
//find products
store.find('product').then(function(products) {
// get all the tag promises
var promiseArr = products.getEach('tags');
//wait on them
Em.RSVP.all(promiseArr).then(function() {
var filter = store.filter('product', function(product, index, enumerable) {
var match = false;
product.get('tags').forEach(function(tag) {
if(tag.get('name') === 'Tag 1') {
console.log(product.get('name') + ' true');
match = true;
} else {
console.log(product.get('name') + ' false', tag.get('name'));
}
});
return match;
}); //filter
resolve(filter);
}); // RSVP All
}); //find
}); // promise
}