Ember: définir la valeur de l'attribut avec l'action passée d'un élément <select>

Question

J'essaie de comprendre comment définir une nouvelle valeur d'attribut Ember Data Record en fonction des choix dans un élément select, en utilisant l'assistant {{action}}. Voici ma situation, simplifiée:

item.js route. Crée un nouvel enregistrement disponible dans le modèle.

model() { 
    return this.store.createRecord('item'); 
} 

new-item.hbs modèle. L'élément select déclenche l'action pour définir l'attribut de couleur du nouvel élément.

<select {{action 'setColor' model value="target.value" on="change"}}> 
    <option value="">choose</option> 
    <option value="white">white</option> 
    <option value="blue">blue</option> 
    <option value="red">red</option> 
    <option value="yellow">yellow</option> 
</select> 

item.js contrôleur. Console.log (option) ne renvoie rien.

actions: { 
    setColor(item, option) { 
    console.log(option); 
    record.set('color', option); 
    console.log(item); 
    } 
} 

Le fichier record.set fonctionne bien, je peux coder en dur l'option et le fichier console.log (item) montrera que l'objet new item a l'attribut color set.

D'autre part, si je fais l'appel d'action avec juste

onChange={{action 'setColor' value="target.value"}} 

la couleur se fait correctement connecté à l'action. Mais si j'ajoute "model" dans cet appel d'action comme précédemment avec la syntaxe {{action ... on = "change"}}, console.log (option) renvoie undefined et console.log (item) renvoie un Event sans objet de modèle attaché.

La question est: Comment puis-je passer à la fois le Target.Value et le modèle à l'action setColor?

Answer 1

setColor la fonction recevra l'attribut event comme dernier argument par défaut.

onChange={{action 'setColor' value="target.value"}} 

si value attribut seront récupérés à partir event. donc cela fonctionnera comme prévu. mais

onChange={{action 'setColor' model value="target.value"}} 

value attribut va essayer d'obtenir target.value de model biens que nous avons envoyé model comme premier argument, et par défaut l'argument event sera passé comme second argument. Donc, la combinaison ne fonctionnera pas.

solution serait

onChange={{action 'setColor' model}} 

et actions à l'intérieur,

actions: { 
    setColor(model, event) { 
    let value = event.target.value; 
    } 
}