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

Question

我正在尝试使用{{action}}助手来根据选择元素中的选择来设置新的ember数据记录的属性的值。这是我的情况，简化了：

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

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

new-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 Controller 。

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

console.log（option）什么都没有返回。record.set工作正常，我可以编码该选项，并且console.log（item）将表明新项目对象具有颜色属性集。

另一方面，如果我只用

进行操作调用

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

颜色可以从动作中正确记录。但是，如果我像以前一样将"模型"添加到该操作调用中，则使用{{action ... on =" cange"}}语法，console.log（option）返回Undefined and Console.log（item）附加模型对象。

问题是：如何通过 target.value 和 setColor Action？

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个不同的输入（下拉词＆amp; text-field）使用相同的操作（但不使用解决值的相同路径），因此我必须使用value="..."作为动作助手的一部分。

我在https://stackoverflow.com/a/45762071/45948

中找到了答案。

因此，在您的情况下是：

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

，然后简单地：

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