javascript - 如果我使用 renderTemplate 如何在 ember 中刷新路由？

Question

我的两条路线有相同的模板和 Controller ，所以我的路线想使用 renderTemplate 相同的模板和 Controller ，如:

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()

Controller :

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

  number: null

代码看起来没问题，但是我用的时候发现query params 不能用了。

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

我无法用谷歌搜索有关此问题的任何信息。

我知道如果我使用 OrderRoute 和 OrderController 路由和 Controller 具有相同的名称，所有的想法都可以。但是我的 2 条路线想要有相同的模板，就像:

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

我正在为此使用 {{partial}}，就像:http://emberjs.jsbin.com/bifanateku/1/edit?html,js,console

这是可行的，但我认为如果我可以使用 renderTemplate 代码会更清晰。

也许有更好的方法来解决这个问题？

Answer 1

对于查询参数， Controller 和路由应该一起工作。

在您的例子中，您使用的是 order 路由，它需要来自您没有的 order Controller 的查询参数。

所以你要么为路由定义一个不同的 Controller ，e。 g.

contollerName: 'product',

或者将查询参数定义移动到 order Controller 并将它们绑定(bind)到 product Controller 的属性。

这是一个毛茸茸的设置，我相信你可能会doing something wrong首先。

更新1

你不应该为此使用 Controller 。使用组件。

Ember 正在弃用 Controller 并打算只使用组件。但就目前而言， Controller 作为页面的入口点仍然是必要的。剩下的应该是组件!

这是你应该如何做的:

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>

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