动态路由代码什么都不做

Question

这是我更清楚的一点：

https://ember-twiddle.com/1454b9f4a64c197879d13f756401e561?openFiles=router.js%2C

我正试图制作一条动态路线。当我点击图片时，它应该转到具有不同URL和不同内容的详细页面。就像，当我点击第一张图片时，它应该转到localhost：4200 / pic / 1或localhost：4200/1。

我正在尝试使用URL动态但是我不能到目前为止，当我点击图片时它什么都不做。我做错了什么？

此外，我在开始时为每张图片创建了路线和模板，但是如果数据量较大则无法实现。我怎么处理这个？

Answer 1

我得到了它的工作：

• 不使用Ember-data ....我不知道如何在Ember Twiddle中完成这项工作。我只使用了一个简单的对象数组。
• 我将模型传递到link-to
中的路线

以下是模板在pic中传递给路径的link-to模型的样子：

{{outlet}}

{{#each model as |pic|}}
  <div>{{#link-to "pic" pic}}
     <img src={{pic.image}} width="300">
  {{/link-to}}</div>
{{/each}}

在这里查看我的工作：https://ember-twiddle.com/4b2b6467199622ae740259622c76ba9b

Answer 2

在动态路由中使用{{link-to}}帮助程序时，还必须包含动态属性。

{{#each model as |pic|}}
  <div>{{#link-to 'pic' pic}}<img src={{pic.image}} width="300">{{/link-to}}</div>
{{/each}}{{outlet}}

这里将pic模型传递给link-to helper。

但如果您直接访问特定图片的页面，这将不起作用。

同时将models / images.js重命名为pics.js.您还必须从pics模型中删除id属性，因为Ember.js不允许手动设置id。

Answer 3

您需要使用link-to

传递参数

{{#link-to 'pic' pics}}

因为您正在从params.id访问pic路径中的ID，但未发送任何参数。

twiddle