Ember：設置屬性的值與從<select>元素傳遞的動作

Question

我想弄清楚如何使用{{action}}幫助器根據選擇元素中的選項設置新的Ember Data Record的屬性值。這是我的情況，簡化爲：

item.js route。創建模板中可用的新記錄。

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

新item.hbs模板。 select-element觸發動作來設置新項目的顏色屬性。

<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控制器。

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

Console.log（option）不返回任何內容。 record.set工作正常，我可以硬編碼的選項和console.log（項目）將顯示新的項目對象具有設置的顏色屬性。

在另一方面，如果我做動作調用只需

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

的顏色會從動作正確登錄。但是，如果我使用{{action ... on =「change」}}語法將「模型」添加到該動作調用中，則console.log（選項）返回undefined，console.log（item）將返回一個沒有模型對象附加。

的問題是：我如何通過都的target.value 和模型到的setColor行動？

Answer 1

setColor功能將默認接收event屬性作爲最後一個參數。

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

所以value屬性將被從event檢索。所以這將按預期工作。但

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

value屬性將嘗試從model財產得到target.value，因爲我們發送model作爲第一個參數，默認event參數將作爲第二個參數傳遞。所以組合不起作用。

解決辦法是

onChange={{action 'setColor' model}} 

和範圍內的行爲，

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