Ember onClick事件未完成操作

Ember onClick event not completing action

本文关键字：操作 未完成 事件 onClick Ember      更新时间：2023-09-26

我正在开发Ember应用程序，在处理DOM和组件时遇到了麻烦。我有一个companies-expander组件，它将显示database中的每个公司，并将展开以显示该公司可用的作业：

//companies.hbs
<h1>Companies</h1>
{{#each model as |company| }}
  {{company-expander name=company.name url=company.url address=company.address positions=company.positions}}
{{/each}}
{{outlet}}

公司扩展器组件模板文件如下所示：

<div class="expander">
  <a href="javascript:void(0)" id="js-expander-trigger" class="expander-trigger expander-hidden">{{name}}</a>
  <div id="js-expander-content" class="expander-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
</div>

公司扩展器.js文件如下所示：

import Ember from 'ember';
export default Ember.Component.extend({
    _setup: Ember.on('didInsertElement', function() {
        console.log("doc ready");
        var expanderTrigger = document.getElementById("js-expander-trigger");
        var expanderContent = document.getElementById("js-expander-content");
        $('#js-expander-trigger').click(function(){
          console.log("click");
          $(this).toggleClass("expander-hidden");
        });
    })
});

组件成功加载并提取了公司的名称。问题是，点击仅在点击第一个项目时注册，并在返回多少公司记录时注册点击次数。div的类也不会被切换。

除非ID在任何特定页面中都不是唯一的，否则不应使用"getElementById"。在您的情况下，由于组件在每个循环中，因此重复相同的元素ID。

将ID替换为类将在此处工作。以下是工作示例。https://ember-twiddle.com/83604248a4bba2c5092d

相关文章：