Question

这些天我学习了余烬，我遇到了链接帮助器的问题。如果我使用它来创建嵌套路由的链接，它工作正常（如果单击链接，＆＃34;活动＆＃34;类将添加到元素 - 如文档中所述），直到我重新加载页面。当我重新加载页面时，嵌套rouse的内容将正确加载到{{outlet}}，但链接将失去其活动＆＃34;类。我做错了什么？

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}

因此link-to中引用的对象与当前路径的模型不同。因此，对活动链接的相等性检查将不起作用。

快速解决方案是每次都停止查找创建对象。 e.g。

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。但是，如果它不起作用，请告诉我。

链接到嵌套资源会在页面重新加载后丢失活动类

1 个答案: