ember.js - 在模型更改时更新 ember 组件

Question

使用 Ember 1.13

我有两个嵌套资源，其中一个根据动态路由返回的模型渲染组件

类似的东西

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

以及呈现组件的 map 模板

map.hbs

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

当我第一次点击时

/maps/1

组件渲染

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

/maps/2

看起来好像路由永远不会被命中并且组件永远不会更新

这是使用链接到的结果，还是路由没有被命中是真的，因为仅更改路由内部的模型确实会导致相同的生命周期 Hook 关闭？

强制该组件重新渲染的最佳方法是什么？

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 的记录。如果不存在，它将通过路线的模型 Hook 获取它。