Как получить доступ к данным из маршрутов в шаблоне приложения Ember?

Question

Я следую за документами для Ember 2.3 и не могу найти нигде что-то очень простое: как получить доступ к значению, предоставленному крючком модели маршрута внутри основного шаблона: application.hbs?

маршрутов/client.js

// ... 
export default Ember.Route.extend({ 
    model() { 
     return { 
      navigation: [ 
       { 
        title: "Projects", 
        link: "projects" 
       }, 
       { 
        title: "My Specifications", 
        link: "specs" 
       } 
      ] 
     } 
    } 
}); 

шаблонов/application.hbs

<nav> 
    {{#each navigation as |navItem|}} 
     <li>{{#link-to navItem.link}} {{navItem.title}} {{/link-to}}</li> 
    {{/each}} 
</nav> 
{{outlet}} 

Как теперь, объект навигации доступен шаблону маршрута (client.hbs), но не к шаблону приложения.

Answer 1

Вот как это делается (если уголек не придумывает лучшим образом в будущих версиях):

маршруты/client.js

// ... 
export default Ember.Route.extend({ 
    setupController() { 
     this.controllerFor('application').set('navigation', ["nav1", "nav2"]); 
    } 
}); 

Спасибо, Иван, за ответ!

Answer 2

Как один доступ значение обеспечивается модель крючок маршрута внутри основного шаблона

По умолчанию внутри setupController крюка маршрута, Эмбер будет set the property model on your controller к разрешенной стоимости обещания возвращается от крюка маршрута model.

Значение вы можете просто использовать свойство model в шаблоне для доступа model.navigation:

<nav> 
    {{#each model.navigation as |navItem|}} 
     <li>{{#link-to navItem.link}} {{navItem.title}} {{/link-to}}</li> 
    {{/each}} 
</nav> 

Если вы хотите использовать другое имя, вы можете переопределить setupController крюк и установить имя себя:

export default Ember.Route.extend({ 
    // ... 
    setupController(controller, model) { 
    this.set('navigation', Ember.get(model, 'navigation')); 
    } 
    // ... rest of the code 
}) 

Значит, вы можете использовать navigation вместо model.navigation внутри шаблона. Другой способ мог бы добавить alias внутри контроллера для model собственности:

export default Ember.Controller.extend({ 
    navigation: Ember.computed.alias('model.navigation') 
    // ... rest of the code 
}) 

, который позволит вам, а также использовать navigation вместо model.navigation.

Однако, если вы хотите иметь какую-то глобальную навигацию в своем приложении, лучшим способом было бы использовать Service, который вы вводите в любой контроллер, который нуждается в навигации. Что-то вроде:

// app/services/navigation.js 
export default Ember.Service.extend({ 
    items: null, 

    init() { 
    this._super(...arguments); 
    this.set('items', [{ 
     title: "Projects", 
     link: "projects" 
    }, { 
     title: "My Specifications", 
     link: "specs" 
    }]); 
    } 
}); 

А затем вводят его в контроллерах:

export default Ember.Controller.extend({ 
    navigation: Ember.service.inject() 
}); 

И теперь у вас есть доступ к навигации в шаблоне этого контроллера, а также.

Answer 3

Я бы разрешил эту проблему следующим образом. Создайте компонент навигации, который принимает пользовательские параметры.

Шаблоны application.hbs

теперь в вашем client.js

apiURL: 'navigations/client' 

и пользовательский компонент таможенно-navigation.js

resolvedRouteNavs: function() { 
    return DS.PromiseArray.create({ 
      promise: store.query(this.get('url'), { user? : userID?? }); 
    }) 
}.property('apiURL') 

И custom-navigation.hbs.

{{#each resolvedRouteNavs as |navItem|}} 
    {{navItem.name}} 
{{/each}} 

Если вы имеете дело со статическими массивами, как навигации

то нет разрешения не требуется, и были бы просто отказ поставить переплетен массив, который отличается для каждого маршрута.

client.js

navs: [{ name: '1', route: 'foo'}, { name: '2', route: 'bar' }] 

некоторые-разные-place.js

navs: [{ name: 'blah', route: 'foo.bar'}, { name: 'meh', route: 'bar.foo' }] 

И действительно модель крючок должен содержать данные, извлекаемые с сервера. В противном случае используйте hookController.

setupController: function(controller, model) { 
     this._super(controller, model); 

     controller.setProperties({ 
      nav: [] 
     });