Ember How to handle routing for search results child routes - ember.js

Question

Here's an image that illustrates the design I was given and need to develop in ember. I'm a bit at a loss on how to handle the routing and implementation in ember.
So to explain this simplified example, say I have a search results page (results are being returned from the back end), where as you would expect the search results aren't always going to be the same. However, when I click on one of the search results, I need to be able to open the product's page as a nested route.
This raises a few problems given that someone returning at a later time will likely not get the same list of products. How would I handle the routing, something like this?
Router.map(function() {
this.resource('search', function(){
this.route('product', {route: ':productID'}, function())
});
});
I'm also not sure how to setup it up the heirarchy in terms of containerview, views, components, etc.
Help?

Answer 1

I think you need to create routes like that
this.resource('products', function() {
this.resource('product',{path: '/:id'});
});
After that you need to create 2 routes ProductsRoute and ProductRoute.
App.ProductsRoute = Ember.Route.extend({
model: function() {
return this.get('store').find('product');
}
});
App.ProductRoute = Ember.Route.extend({
model: function(product) {
return this.get('store').find('product', product.id);
}
});
When you will try to open page /products you will get all products. If you will use RestAdapter it sends request to your REST API /products
I think you need to create action in ProductsController to search products:
App.ProductsController = Ember.ArrayController.extend({
actions: {
searchProducts: function() {
var queryText = this.get('queryText');
if (queryText) {
return this.get('store').filter('product', {query: queryText}, function(item) {
return true;
});
}
}
}
});
This action sends request to your api with /products?query=queryText
In your products template create search form and use something like that {{action 'searchProduct'}} for Search button. Also in your template you need to show all products for that use {{#each item in model}} and to create link to each product use {{#link-to 'product' item}}. I think it will be best practice to create component for your search box http://guides.emberjs.com/v1.10.0/components/.