Come accedere ai dati dalle rotte in un modello di applicazione Ember?

Question

Sto seguendo i documenti per Ember 2.3 e non riesco a trovare da nessuna parte qualcosa di molto semplice: come si accede a un valore fornito dal gancio del modello della rotta all'interno del modello principale: application.hbs?

percorsi/Client.js

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

templates/application.hbs

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

Come è ora, l'oggetto di navigazione è accessibile al modello del percorso (client.hbs) ma non al modello dell'applicazione.

Answer 1

Ecco come si fa (a meno che non brace si presenta con un modo migliore nelle versioni future):

percorsi/Client.js

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

Grazie, Ivan, per la risposta!

Answer 2

Come fa un accesso un valore fornito dal gancio del modello del percorso all'interno del template principale

Per impostazione predefinita, all'interno del gancio setupController del percorso, Ember sarà set the property model on your controller al valore risolto della promessa restituita dal gancio model del percorso.

Significato si può semplicemente utilizzare la proprietà model nel modello per accedere model.navigation:

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

Se si desidera utilizzare un nome diverso, è possibile ignorare il gancio setupController e impostare il nome da soli:

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

Ciò significa che ora è possibile utilizzare navigation anziché model.navigation all'interno del modello. Un altro modo potrebbe essere quello di aggiungere un alias all'interno del vostro controller per la proprietà model:

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

che vi permetterà così di utilizzare navigation invece di model.navigation.

Tuttavia, se si desidera avere una sorta di navigazione globale nell'applicazione, il modo migliore sarebbe utilizzare uno Service che si dovrebbe iniettare in qualsiasi controller che necessita di navigazione. Qualcosa di simile:

// 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" 
    }]); 
    } 
}); 

E poi iniettare nel vostro controller:

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

E ora si ha accesso alla navigazione nel modello che del controllore pure.

Answer 3

Vorrei risolvere il problema in questo modo. Crea un componente di navigazione che accetta parametri personalizzati.

Modelli application.hbs

Ora nel tuo Client.js

apiURL: 'navigations/client' 

E il componente personalizzato personalizzati-Navigation.js

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

E custom-navigation.hbs.

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

Se hai a che fare con le matrici statiche come navigazioni

allora non è necessario risolvere e sarebbe semplicemente quello di mettere fuori la matrice binded, che è diversa per ogni percorso.

Client.js

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

alcuni-diversi-place.js

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

e davvero gancio modello dovrebbero contenere dati che vengono recuperati dal server. Altrimenti usa il comando setupController.

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

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