Ссылка на вложенный ресурс теряет активный класс после перезагрузки страницы

Question

Я изучаю ember в эти дни, и у меня возникла проблема с ссылкой на помощник. Если я использую его для создания ссылки для вложенного маршрута, он отлично работает (если щелкнуть ссылку, к элементу будет добавлен «активный» класс, как описано в документах), пока я не перезагружу страницу. Когда я перезагружаю страницу, содержимое для вложенного розыгрыша будет правильно загружено в {{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 и связанного объекта относится к одному и тому же объекту. Таким образом, он будет отмечен как активный.

Однако, когда вы обновляете страницу, вы выполняете поиск дважды, один раз в модели 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. Но дайте мне знать, если это не сработает.