CODEWITHSUNDEEP
ember.js
dagz433
dagz433

Reputation: 1

Component is returing the same ID for elements of the same type

I am pretty new to Ember and can't seem to make sense of what's going on.

I have two inputs in my component

{{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"}}

in my .js I am trying to get the id and value of each individual input.

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

The ember generates these two ids input 1: id=ember689, input 2 : id=ember690

When I click on either one the function return ember689. There are no other inputs in the HTML. How can I go about grabbing the individual id? and value?

Upvotes: 0

Views: 69

Answers (3)

Ember Freak
Ember Freak

Reputation: 12872

Follow Lux answer, that's the way to go.

1.In getIdAndValue, you don't need to call this._super(...arguments). We will include super call only when we override ember builtin methods or to call parent object method.

2.In your example, this.$('input') this is returning array with 2 elements you included. Created sample twiddle to explain this.

3.Don't forget you can even send id value to input helper.

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

Upvotes: 0

Lux
Lux

Reputation: 18240

Since you use a closure action (click=(action 'myActionName')) you will receive the event object as first parameter:

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

Also notice that if you don't need live binding I would recommend you to use a normal HTML <input> instead of the {{input}} helper:

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

Also I'm not sure what you want to achieve with value="flow_q1". If you want to access the property named flow_q1 you should do value=flow_q1 when you use the {{input}} helper and value={{flow_q1}} when you use a normal HTML <input>.

Upvotes: 2

Stephen Couturier
Stephen Couturier

Reputation: 100

Ember generates the id for each component so it will always be changing when new components and fields are added. to get the value for the input component you must assign a variable to the value field and then you can access that variable to get the input's value like this:

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

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

then you can use this.get('value1') in your component to retrieve the value.

Upvotes: 0

Related Questions