在Ember中单击具有特定属性的元素时自动触发操作

nc1teljy 于 2023-06-22 发布在其他

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

如何在Ember 3.11项目中，每当单击包含特定属性的元素时自动触发操作？
目前，我的结构如下：

myComponent.js:

export default class MyComponent extends Component {
  @action
  elementClicked(someValue) {
    // do something
  }
}

myTemplate.hbs:

<div onclick={{action 'elementClicked' 'someValue'}}>
  some text
</div>

我想要的是实现以下目标：

myTemplate.hbs:

<div trackClick='somevalue'>
  some text
</div>

每当一个元素在任何模板中定义了'trackClick'属性时，我都希望执行我定义的'elementClicked'方法。我不想手动将其分别添加到每个组件。
我不想为每个组件单独定义操作，而是希望在一个位置全局地定义它。我的意图是，每当单击任何组件中的任何元素（具有'trackClick'属性）时，都会触发这个全局定义的操作。
如何实现这一目标有何建议？谢谢你。

ember.js

来源：https://stackoverflow.com/questions/76515514/automatically-triggering-an-action-in-ember-when-clicking-on-elements-with-a-spe

1条答案

按热度按时间

imzjd6km1#

而不是

<div trackClick='somevalue'>
  some text
</div>

你想使用on修饰符来调用一个函数：

<div {{on 'click' elementClicked}} data-track="somevalue">
  some text
</div>

然后在组件中：

@action
elementClicked(clickEvent) {
  let value = clickEvent.target.getAttribute('data-track');
}

这里的文档：https://guides.emberjs.com/release/upgrading/current-edition/action-on-and-fn/
对于每个请求，一个全局事件监听，使用eventDelegation，您需要执行类似于以下操作：https://ember-primitives.pages.dev/5-utils/proper-links
但可能更直接/更少的方向，您可以在应用程序路由中添加eventListener：

export default class ApplicationRoute extends Route {
  beforeModel() {
    window.addEventListener('click', this.elementClicked);

    registerDestructor(() => {
      window.removeEventListener('click', this.elementClicked);
    });

  }

  @action
  elementClicked(clickEvent) {
     // logic here
  }
}

赞(0）回复(0）举报 2023-06-22

我来回答

在Ember中单击具有特定属性的元素时自动触发操作

1条答案

相关问题

热门标签

最新问答