Question

使用Ember 1.13

我有两个嵌套资源，其中一个基于动态路由返回的模型呈现组件

类似

Router.map(function() {
  this.resource('maps', function () {
    this.resource('map', { path: '/:map_id' });
  });
});

以及用于呈现组件

的地图的模板

map.hbs

{{some-component model=model}}
{{#each maps as |map|}}
  {{#link to 'map' map}}{{map.name}}{{/link-to}}
{{/each}}

当我第一次点击

/maps/1

组件呈现

当我点击其中一个链接并转到

时

/maps/2

似乎路线永远不会被击中且组件永远不会更新

这是使用link-to的结果还是路由没有被命中，因为只更改路由内部的模型会导致相同的生命周期挂钩出现？

迫使此组件重新渲染的最佳方法是什么？

Answer 1

你可能做错了什么。

这是一个基本的工作示例：

<h3>maps.index</h3>

<ul>
{{#each model as |item|}}
  <li>
    {{link-to item.name 'maps.map' item}}
  </li>
{{/each}}
</ul>

<h3>maps.map</h3>

{{link-to "Back to index" 'maps.index'}}

<hr>

{{x-map map=model}}

<h4>components/x-map</h4>

<p>Id:   {{map.id}}</p>
<p>name: {{map.name}}</p>

App.Router.map(function() {
  this.route('maps', function () {
    this.route('map', { path: '/:map_id' });
  });
});

App.MapsIndexRoute = Ember.Route.extend({
  model: function () {
    return this.store.findAll('map');
  }
});

App.MapsMapRoute = Ember.Route.extend({
  model: function (params) {
    return this.store.findRecord('map', params.mapId);
  }
});

App.Map = DS.Model.extend({
  name: DS.attr('string')
});

演示：http://emberjs.jsbin.com/voquba/4/edit?html,js,output

请注意，不要将整个记录传递到子路径：

{{link-to item.name 'maps.map' item}}

您只能传递其ID：

{{link-to item.name 'maps.map' item.id}}

当您知道ID但没有手头的整个记录时，这很有用。 Ember Data将查找商店中给定ID的记录。如果它不存在，它将通过路径的模型钩子获取它。

在模型更改

1 个答案: