Ember：使用从 <select> 元素传递的操作设置属性值

Question

我正在尝试弄清楚如何使用 {{action}} 助手根据 select 元素中的选择设置新的 Ember 数据记录的属性值。这是我的情况，经过简化：

item.js路线。创建模板中可用的新记录。

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

new-item.hbs 模板。 select 元素触发设置新项目颜色属性的操作。

<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（选项）returns 没有。 record.set 工作正常，我可以对该选项进行硬编码，并且 console.log(item) 将显示新的项目对象具有颜色属性集。

另一方面，如果我只用

执行操作调用

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

从操作中正确记录了颜色。但是，如果我像以前一样使用 {{action ... on="change"}} 语法将 "model" 添加到该操作调用中， console.log(option) returns undefined 和 console.log(item) returns 没有附加模型对象的事件。

问题是： 我如何通过 both the target.value and 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;
  }
}

Answer 2

我刚遇到同样的问题，但对此处接受的答案不满意，因为我有 2 个不同的输入（下拉和文本字段）使用相同的操作（但解析值的路径不同），所以我不得不使用 value="..." 作为动作助手的一部分。

我在

中找到了答案

所以你的情况是：

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

然后简单地：

actions: {
  setColor(model, option) {
    ...
  }
}

Ember：使用从 <select> 元素传递的操作设置属性值

Ember: set attribute's value with action passed from a <select> element

html-select

ember.js

ember-data