If I use renderTemplate how to refresh route in ember?

Question

My two routes have the same template and controller so my route want to use renderTemplate the same template and controller, like:

OrderRoute = Ember.Route.extend 
  model: (params)->  
    Product.findAll(params)

  setupController: (controller, model)->
    @controllerFor('product').set('model', model)

  renderTemplate: ->
    @render 'products',
      controller: 'products'

  actions:
    queryParamsDidChange: ->
      @refresh()

The controller:

ProductController = Ember.Controller.extend
  queryParams: ['number']

  number: null

The code look like is no problem, but when I use I found the query params could not work.

jsbin: http://emberjs.jsbin.com/gegonemadu/1/edit

I could not google anything about this question.

I knew if I use OrderRoute and OrderController the route and controller have same name, all the think will be ok. But I my 2 route want to have the same template, just like:

/order
/other
2 route url use the product template and controller

I am using {{partial}} to this, just like: http://emberjs.jsbin.com/bifanateku/1/edit?html,js,console

This is can work, but I think if I can use renderTemplate the code will be cleaner.

Maybe there is any better way to approach this problem?

Answer 1

For query params, the controller and the route should work together.

In your case, you're using the order route which expects query params from an order controller which you don't have.

So you either define a different controller for the route, e. g.

contollerName: 'product',

or move the query params definition to the order controller and bind them to properties of the product controller.

This is a hairy set up, I believe you might be doing something wrong in the first place.

Update 1

You should not use controllers for that. Use components.

Ember is deprecating controllers and going to use only components. But for now, controllers are still necessary as entry points for your pages. The rest should be components!

Here's how you should do it:

App.Router.map(function() {
  this.route('foo');
  this.route('bar')
});


App.FooController = Ember.Controller.extend({
  queryParams: ['number'],
  number: null
});


App.BarController = Ember.Controller.extend({
  queryParams: ['number'],
  number: null
});

  <script type="text/x-handlebars" data-template-name="foo">
    {{x-product number=number}}
  </script>


  <script type="text/x-handlebars" data-template-name="bar">
    {{x-product number=number}}
  </script>


  <script type="text/x-handlebars" data-template-name="components/x-product">
    Search Product:
    {{input value=number}}

    <ul>
      {{#each model}}
        <li>{{this}}</li>
      {{/each}}
    </ul>
  </script>

Demo: http://emberjs.jsbin.com/xixeto/1/edit?html,js,output