Ember How to handle routing for search results child routes

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?

When you say someone returning at a later time will likely not get the same list of products, are you referring to Product 1, 3, 4, 5, and 6 in the image above? Those products may change? — Paul Oliver, Apr 08 '15 at 14:12
Yeah, there will be thousands of different products, and using the same search query at a later time is likely to return different results. You might return and see product 26, 101, 32, 17, and 5 as the intial set of results. (this will be a paginated results page that may contain 1000's of results) — Chava Sobreyra, Apr 08 '15 at 14:15

score 1 · Answer 1 · answered Apr 08 '15 at 21:29

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/.

Ember How to handle routing for search results child routes

1 Answers1