javascript - 页面重新加载后，指向嵌套资源的链接丢失事件类

Question

这几天我在学习 ember，我遇到了 link-to helper 的问题。如果我使用它为嵌套路由创建链接，它可以正常工作(如果单击链接，“事件”类将添加到元素中 - 如文档中所述)，直到我重新加载页面。当我重新加载页面时，嵌套 rouse 的内容将正确加载到 {{outlet}} 但链接将失去其“事件”类。我做错了什么？

JavaScript:

window.App = Ember.Application.create({ rootElement: '#app' });

App.Router.map(function () {
  this.resource('notes', { path: '/' }, function () {
    this.route('show', { path: '/:note_id' });
  });
});

App.NotesRoute = Em.Route.extend({
  model: function () {
    return App.Note.find();
  }
});

App.NotesShowRoute = Em.Route.extend({
  model: function (params) {
    return App.Note.find(params.note_id);
  }
});

App.Note = Em.Object.extend();

App.Note.reopenClass({
  find: function(id) {
    var notes = [
      {
        id: 1,
        title: 'abc',
        text: 'lorem ipsum text 1111111'
      },
      {
        id: 2,
        title: 'def',
        text: 'lorem ipsum text 2222222'
      }
    ];
    return id ? notes[parseInt(id) - 1] : notes;
  }
});

HTML:

<div id="app" class="row">
    <script type="text/x-handlebars">
      <div class="col-md-2">
        <h2>Tags</h2>
      </div>
      {{outlet}}
    </script>
</div>
<script type="text/x-handlebars" data-template-name="notes">
    <div class="col-md-3">
      <h2>Notes</h2>
    {{#each}}
      {{#link-to 'notes.show' this}}{{title}}{{/link-to}}
    {{/each}}
    </div>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="notes/show">
    <div class="col-md-7">
      <h2>{{title}}</h2>
      <p>{{text}}</p>
    </div>
</script>

Answer 1

当您单击链接时，它会将对象传递给新路由。所以不调用模型查找。因此，show route 的上下文和链接的对象都指的是同一个对象。因此它将被标记为事件。

但是，当您刷新页面时，您将进行两次查找，一次是在 NotesRoute 模型中(您对每个模型进行循环)，一次是在 NotesShowRoute 模型中。

Javascript 对象是引用类型。两个普通的 javascript 对象不被认为是相等的，即使它们的内容相同。例如尝试将其输入您的 JavaScript 控制台。

{ one: 1, two: 2} == {one: 1, two: 2}

因此链接中引用的对象与当前路由的模型不同。因此，对处于事件状态的链接的相等性检查将不起作用。

快速解决方案是阻止查找每次都创建对象。例如

App.Note.reopenClass({
  all: [
    {
      id: 1,
      title: 'abc',
      text: 'lorem ipsum text 1111111'
    },
    {
      id: 2,
      title: 'def',
      text: 'lorem ipsum text 2222222'
    }
  ],
  find: function(id) {
    return id ? this.all[parseInt(id) - 1] : this.all;
  }
});

另一种选择是为您的对象滚动某种身份映射。 Here is a blog post做一个比我解释它更好的例子。

请注意，我还没有实际测试过该代码，因为我懒得创建 jsbin。但如果它不起作用，请告诉我。