Ember.js 组件正在为相同类型的元素返回相同的ID

我对灰烬很陌生，似乎不知道发生了什么

我的组件中有两个输入

{{input click=(action "getIdAndValue") type="range" min="0" max="100" value="flow_q1"}}

{{input click=(action "getIdAndValue") type="range" min="0" max="100" value="flow_q2"}}

在我的

.js

中，我试图获取每个输入的

id

和值

getIdAndValue: function(value){
    this._super(...arguments);    
    console.log("element id: " + this.$('input').attr("id"));
}

余烬生成这两个ID 输入1:id=

ember689

， 输入2:id=

690

当我点击其中一个时，函数返回

ember689

。

---

HTML中没有其他输入。我怎样才能拿到个人身份证？和值？

余烬为每个组件生成id，因此在添加新组件和字段时，id将始终更改。要获取输入组件的值，必须为值字段分配一个变量，然后可以访问该变量以获取输入值，如下所示：

{{input type="range" min="0" max="100" value=value1}}

{{input type="range" min="0" max="100" value=value2}} 

---

然后，您可以在组件中使用

this.get（'value1'）

来检索值。

Ember为每个组件生成id，因此在添加新组件和字段时它将始终更改。要获取输入组件的值，必须为值字段分配一个变量，然后可以访问该变量以获取输入值，如下所示：

{{input type="range" min="0" max="100" value=value1}}

{{input type="range" min="0" max="100" value=value2}} 

---

然后，您可以在组件中使用

this.get（'value1'）

来检索值。

因为您使用了闭包操作（

单击=（操作“myActionName”）

），您将收到

事件作为第一个参数：

getIdAndValue: function(event) {
  let id = event.target.id;
  let value = event.target.value;
}

另外请注意，如果您不需要实时绑定，我建议您使用普通的HTML
，而不是
{input}
帮助程序：

<input onclick={{action "getIdAndValue"}} type="range" min="0" max="100" value="flow_q1" />



此外，我不确定您希望通过
value=“flow\u q1”
实现什么。如果您想访问名为
flow\uq1
的属性，您应该在使用
value=flow\uq1
时使用
{input}
帮助程序，在使用普通HTML
时使用
value={{flow\uq1}
，因为您使用了闭包操作（
单击=（操作“myActionName”）
）您将收到
事件
对象作为第一个参数：

getIdAndValue: function(event) {
  let id = event.target.id;
  let value = event.target.value;
}

另外请注意，如果您不需要实时绑定，我建议您使用普通的HTML
，而不是
{input}
帮助程序：

<input onclick={{action "getIdAndValue"}} type="range" min="0" max="100" value="flow_q1" />



此外，我不确定您希望通过
value=“flow\u q1”
实现什么。如果您想访问名为
flow\uq1
的属性，当您使用
{input}
帮助程序时，您应该执行
value=flow\uq1
操作，当您使用普通HTML

1.在
getIdAndValue
中，您不需要调用此.\u super（…参数）。我们将仅在重写ember内置方法或调用父对象方法时才包含超级调用

2.在您的示例中，
this.$（'input'）
这是包含2个元素的返回数组。这是为了解释这一点

3.不要忘记，您甚至可以将id值发送到
input
helper

{{input click=(action "getIdAndValue") type="range" id="startRange" min="0" max="100" value="flow_q1"}}

按照勒克斯的回答去做，就是这样

1.在
getIdAndValue
中，您不需要调用此.\u super（…参数）。我们将仅在重写ember内置方法或调用父对象方法时才包含超级调用

2.在您的示例中，
this.$（'input'）
这是包含2个元素的返回数组。这是为了解释这一点

3.不要忘记，您甚至可以将id值发送到
input
helper

{{input click=(action "getIdAndValue") type="range" id="startRange" min="0" max="100" value="flow_q1"}}