我正在开发一个 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}}
company-expander 组件模板 文件如下所示:
<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>
company-expander.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 的类也没有切换。
最佳答案
您不应使用“getElementById”,除非该 ID 在任何特定页面中都不是唯一的。在您的情况下,由于组件在每个循环中,因此重复相同的元素 ID。
将 ID 替换为 class 将在这里起作用。这是工作示例。 https://ember-twiddle.com/83604248a4bba2c5092d
关于javascript - Ember onClick 事件未完成操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34295784/