Блог

Я довольно новичок в Ember и, похоже, не могу понять, что происходит.

У меня есть два входа в моем компоненте

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

Ember генерирует эти два идентификатора
вход 1: id= ember689 ,
вход 2: id = ember690

Когда я нажимаю на любой из них, функция возвращает ember689 . В HTML нет других входных данных. Как я могу получить индивидуальный идентификатор? и значение?

Поскольку вы используете действие закрытия ( click=(action 'myActionName') ), вы получите event объект в качестве первого параметра:

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

Также обратите внимание, что если вам не нужна живая привязка, я бы рекомендовал вам использовать обычный HTML <input> вместо {{input}} помощника:

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

Также я не уверен, чего вы хотите достичь value="flow_q1" . Если вы хотите получить доступ к названному свойству flow_q1 , вы должны делать value=flow_q1 это при использовании {{input}} помощника и value={{flow_q1}} при использовании обычного HTML <input> .

Ember генерирует идентификатор для каждого компонента, поэтому он всегда будет меняться при добавлении новых компонентов и полей. чтобы получить значение для компонента ввода, вы должны присвоить переменную полю значения, а затем вы можете получить доступ к этой переменной, чтобы получить значение ввода следующим образом:

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

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

затем вы можете использовать this.get('value1') в своем компоненте для извлечения значения.

Следуйте ответу Lux, это правильный путь.

1.In getIdAndValue , вам не нужно вызывать this._super(…аргументы). Мы будем включать суперзвонок только тогда, когда мы переопределяем встроенные методы ember или вызываем метод родительского объекта.

2.In в вашем примере this.$('input') это возвращает массив с 2 включенными вами элементами. Создал образец twiddle, чтобы объяснить это.

3. Не забывайте, что вы даже можете отправить значение идентификатора input помощнику.

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