ember.js Ember -将事件和其他参数传递给操作处理程序

cl25kdpy 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(201)

在我的Ember组件中，我有一个字符串列表，以及一个在列表的某个索引处更新字符串的函数。

animals: computed(function() {
    return ["dog", "cat"];
}),

updateAnimal(value, index) {
    this.animals[index] = value;
},

在我的hbs中，我在一个#each循环中将字符串列表呈现到文本字段中，当我对文本字段执行focus-out操作时，我希望更新特定索引处的字符串。

{{#each animals as |animal index|}}
    <textarea
        value={{animal}}
        {{on "focusout" (action updateAnimal value="details.value")}}
    />
{{/each}}

但是我如何将索引也传递给处理程序呢？换句话说，我如何同时传递事件和一些额外的参数呢？非常感谢你回答我的问题！！

ember.js

来源：https://stackoverflow.com/questions/66510499/ember-pass-event-and-other-parameter-to-action-handler

1条答案

按热度按时间

epggiuax1#

您可以使用{{fn}} helper：

{{#each this.animals as |animal|}}
  <textarea {{on "focusout" (fn this.updateValue animal)}} />
{{/each}}

updateValue方法会接收animal做为第一个参数，并接收事件做为第二个参数。

import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  animals = ['dog', 'cat'];

  @action
  updateAnimal(animal, event) {
    const { value } = event.target;
    window.alert(`Changed text for animal ${animal} to ${value}`);
  }
}

请参阅此Ember Twiddle了解运行的代码：https://ember-twiddle.com/cad87d51ec2e1fdfd88b8a123ba2d7dd?openFiles=components.my-component%5C.js%2Ctemplates.components.my-component%5C.hbs
请注意，我使用Ember Octane原语使您的代码现代化。我使用了原生类，在favor或class字段中丢弃了计算属性，避免了模板中的隐式this回退，并使用@action装饰器绑定this上下文。它应该与您问题中使用的旧模式类似。但我认为新的Octane原语更容易理解。

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js Ember -将事件和其他参数传递给操作处理程序

1条答案

相关问题

热门标签

最新问答