如何设置一个带有动态段的路由链接

Question

我该如何设置一个链接以路由到一个动态段？根据指南，我从以下内容开始：

window.App = Ember.Application.create()
App.Router.map ->
  @resource 'products'
  @resource 'product', path: '/product/:product_id'

在我的模板中：

{{#linkTo "product.1"}}products{{/linkTo}}

很不幸，这给了我以下错误：

Uncaught Error: assertion failed: The attempt to linkTo route 'product.1' failed. 
The router did not find 'product.1' in its possible routes: 'products', 'product', 'index' 

- Andreas Köberle

Answer 1

{{linkTo}} 期望在Router.map中定义路由，因此根据您的映射，它应该简单地为product。

至于动态段，您还需要传递一个对象，该对象将序列化为ProductRoute。在几乎所有情况下，序列化都是自动完成的，因为Ember依赖于约定。在罕见的情况下，必须以稍微不同的方式实现serialize，但对于大多数情况，您无需进行修改。

如果您要在{{each}}循环内部使用{{linkTo}}，可以像这样操作：

{{#each product in controller}}
    {{#linkTo product product}}Details{{/linkTo}}
{{/each}}

或者

{{#each controller}}
    {{#linkTo product this}}Details{{/linkTo}}
{{/each}}

第一个参数是路由名称，第二个参数是您的模型对象。在第一个代码中，该对象还被命名为 product ，而在第二个代码中，它只是作为 this 传递，这是迭代的产物。

如果您有一个不寻常的场景，需要链接到一个动态路由，但又不使用 {{each}} 循环，您必须在 controller （首选）或 view 中公开该对象。然后您需要执行类似以下操作：

App.SomeController = Em.Controller.extend
  product: null

App.SomeRoute = Em.Route.extend
  ### 
  controller is actually `SomeController` here
  model is not being used, and is null, while the actual model being
  supplied to the controller is `product`, retrieved from store
  ###
  setupController: (controller, model) ->
    product = App.Product.find 1
    controller.set 'product', product
    return

您的模板将类似于此：

{{#linkTo product controller.product}}Product{{/linkTo}}

路由如何知道id？

规范。路由会序列化传递的对象，并公开一个仅有一个属性的对象，该属性的名称为该路由模型的名称加上后缀"_id"，在这种情况下将是product_id。因此，当您点击该链接时，应用程序会激活ProductRoute，运行序列化方法创建该id属性。随后，该属性将用作model 钩子的参数。在那里，您调用find 并传递params.product_id 作为参数。然后，该模型返回该模型的承诺，该承诺将被setupController使用，将对象公开给视图层作为controller.content 或简单地 controller。

- MilkyWayJoe

---

在 #each 循环中，我不得不引用 product：{{#linkTo 'product' this}}Details{{/linkTo}}。 - Lars Bilke