Link to nested resource loses active class after page reload

Question

I am studying ember these days and I ran into a problem with a link to an assistant. If I use it to create a link for a nested route, it works fine (if you click on the link, an “active” class will be added to the element, as described in the documents), until I reload the page. When I reload the page, the contents for the nested draw will correctly load into {{outlet}}, but the link will lose its “active” class. What am I doing wrong?

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 . .

, , , 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;
  }
});

. , , .

. , , jsbin. , .