Come si chiama una funzione controller da un modello in Ember?

Question

Diciamo che ho un modello che itera su una collezione di oggetti, e voglio chiamare una funzione con ogni elemento, che è specifico per il controller, e non un modello a livello di preoccupazione:

{{#each people as |person|}} 
    icon name: {{findIconFor(person)}} 
{{/each}} 

I' Mi piacerebbe definire findIconFor nel controller, perché questo è qualcosa di specifico per questa particolare vista.

export default Ember.Controller.extend({ 
    findIconFor: function(person) { 
    // figure out which icon to use 
    } 
); 

Ma questo non funziona. Il modello non riesce a compilare. Errore: In attesa di "STRING", "NUMBER", "ID", "DATA", ottenuto "INVALID"

Qual è il "modo ember" per fare ciò?

Answer 1

userei una proprietà calcolata nel controller:

iconPeople: Ember.computed('people.@each', function(){ 
    var that = this; 
    return this.get('people').map(function(person){ 
    return { 
     'person': person, 
     'icon': that.findIconFor(person) 
    }; 
    }); 
}) 

Ora si potrebbe ottenere l'icona {{person.icon}} e il nome da {{person.person.name}}. Potresti voler migliorare (e il codice non è stato verificato), ma questa è l'idea generale.

Answer 2

Se l'icona è associata a una persona, poiché la persona è rappresentata da un modello, è meglio implementarla come proprietà calcolata sul modello di persona. Qual è il tuo intento nel provare a inserirlo nel controller?

// person.js 
export default DS.Model.extend({ 
    icon: function() { return "person-icon-" + this.get('name'); }.property('name') 
    .. 
}; 

Quindi partendo dal presupposto che people è un array di person:

L'alternativa fornita da opere @jnfingerle (suppongo che voi capito che egli propone che un ciclo su iconPeople), ma sembra un sacco di lavoro extra per andare a creare un nuovo array contenente oggetti. L'icona dipende da qualcosa noto solo al controller? Se no, come ho detto, perché la logica per calcolarlo dovrebbe essere nel controller?

Dove mettere le cose è una questione di filosofia e preferenza. Ad alcune persone piacciono i modelli bare-bones che contengono nient'altro che i campi che scendono dal server; altre persone calcolano i risultati di stato e intermedi nel modello. Alcune persone mettono un sacco di cose nei controller, mentre altri preferiscono i controller leggeri con più logica nei "servizi". Personalmente, sono dalla parte dei modelli più pesanti, dei controller più leggeri e dei servizi. Non sto affermando che la logica di business, o le pesanti trasformazioni dei dati, o la vista dei preparativi dovrebbero andare nel modello, ovviamente. Ma ricorda, il modello rappresenta un oggetto. Se c'è qualcosa di interessante nell'oggetto, che sia disceso dal server o che venga calcolato in qualche modo, per me ha molto senso inserirlo nel modello.

Ricordare inoltre che i controller fanno parte di un percorso/controller/vista nettamente accoppiati. Se c'è qualche cosa specifica del modello che si calcola in un controller, potrebbe essere necessario aggiungerla ad un altro controller che gestisce lo stesso modello. Quindi, prima che tu te ne accorga, stai scrivendo controller mixin che condividono la logica tra i controller che non dovrebbero esserci stati in essi.

In ogni caso, si dice che l'icona proviene da un "archivio dati non correlato". Sembra asincrono. Per me, questo suggerisce che forse è un sottomodello chiamato PersonIcon che è un belongsTo nel modello person.Puoi farlo funzionare con il giusto mix di adattatori e serializzatori per quel modello. La cosa bella di questo approccio è che tutta l'asincronicità nel recupero dell'icona sarà gestita in modo semi-magico, sia quando viene creato il modello person, sia quando effettivamente hai bisogno dell'icona (se dici async: true).

Ma forse non stai utilizzando Ember Data, o non vuoi andare a tutti quei guai. In tal caso, si potrebbe prendere in considerazione che adornano la persona con l'icona in gancio il modello del percorso, avvalendosi della capacità di Ember di gestire la risoluzione modello asincrono, facendo qualcosa di simile al seguente:

model: function() { 
    return this.store.find('person') . 
    then(function(people) { 
     return Ember.RSVP.Promise.all(people.map(getIcon)) . 
     then(function(icons) { 
      people.forEach(function(person, i) { 
      person.set('icon') = icons[i]; 
      }); 
      return people; 
     }) 
     ; 
    }) 
    ; 
} 

dove getIcon è qualcosa di simile

function getIcon(person) { 
    return new Ember.RSVP.Promise(function(resolve, reject) { 
    $.ajax('http://icon-maker.com?' + person.get('name'), resolve); 
    }); 
} 

Oppure, se è più pulita, si potrebbe rompere la roba icona di fuori in un gancio afterModel:

model: function() { return this.store.find('person'); }, 

afterModel: function(model) { 
    return Ember.RSVP.Promise.all(model.map(getIcon)) . 
    then(function(icons) { 
     model.forEach(function(person, i) { 
     person.set('icon') = icons[i]; 
     }); 
    }) 
    ; 
} 

Ora Ember aspetterà che l'intera promessa si risolva, tra cui ottenere le persone e le loro icone e incollare le icone sulle persone, prima di procedere.

HTH.

Answer 3

Come ho passato quasi un'intera giornata su un problema simile, ecco la mia soluzione.

Perché Ember per qualche motivo non consente di eseguire direttamente le funzioni di un controller direttamente dal modello (che è ridicolo e lega le mani in alcuni modi molto stupidi e non so chi ha deciso che questo è un buona idea ...) la cosa che ha più senso per me è creare un helper personalizzato universale, che ti permetta di eseguire funzioni dal modello :) Il trucco qui è che devi sempre passare l'ambito corrente (il "questo" variabile) a quell'assistente.

Così l'assistente potrebbe essere qualcosa di simile:

export default Ember.Helper.helper(function([scope, fn]) { 
    let args = arguments[0].slice(2); 
    let res = fn.apply(scope, args); 
    return res; 
}); 

Quindi, è possibile effettuare una funzione all'interno controller, che si desidera eseguire, ad esempio:

testFn: function(element){ 
    return element.get('name'); 
} 

e poi in il tuo template lo chiami semplicemente con l'helper personalizzato:

{{#each items as |element|}} 
    {{{custom-helper this testFn element}}} 
{{/each}} 

I primi due argomenti a L'helper dovrebbe sempre essere "questo" e il nome della funzione, che si desidera eseguire, e quindi è possibile passare tutti gli argomenti extra che si desidera.

---

Edit: In ogni caso, ogni volta che pensi di aver bisogno di fare questo, si dovrebbe pensare se non sarà meglio per creare un nuovo componente, invece (che sarà nel 90% dei casi)