Ember生成动作或jquery onclick

我有一个可以正常运行的余烬应用程序。 但是用户的交互会像下面那样插入一些DOM …

$(.test).append(Get Data); 

问题是Ember似乎没有意识到已经在DOM中添加了一个动作“getData”。 单击元素时没有任何事情发生。 有什么想法吗？

我想要做的另一种方式是：

  //create the element $(.test).append(Get Data); //make click listener $('#idnum').click(function(){ console.log("get data"); } 

我的问题是我应该将代码放在组件内部，以便它可以监听click事件。 谢谢。

Answer 1

你应该用Ember方式做。 尝试使用把手{{#if}}帮助器动态渲染元素。

 {{#if canGetData}} Get Data {{/if}} 

在这里，您可以根据用户操作在控制器中将canGetData的值设置为true。

Answer 2

第一个示例无法工作，因为ember不会分析DOM中的Handlebars元素，而是使用HTMLBars（一个完整的HTML解析器）解析Handlebars模板，然后通过插入元素而不是文本到DOM中手动呈现它。

然而，第二个例子是如果你必须依赖外部代码进行手动DOM操作的方法。 它确实有效。 看看这个旋风。

这确实有效：

 this.$('.target').append('Get Data'); this.$('#idnum').on('click', () => { alert('clicked'); }); 

只需确保DOM已准备就绪。 所以在didInsertElement钩子中或在用户单击一个按钮之后这样做。

Answer 3

像Lux建议避免使用DOM操作。 我更喜欢以下方法，
如果它是动态的，那么您可以考虑将DOM元素包装为新组件并使用组件帮助器。 找到样品旋转

在application.js中

  export default Ember.Controller.extend({ appName: 'Ember Twiddle', linksArray:[ Ember.Object.create({value:'Text to display',routename:'home'}), Ember.Object.create({value:'Text to display2',routename:'home'})], actions:{ addItem(){ this.get('linksArray').pushObject(Ember.Object.create({value:'AddedDynamically',routename:'home'})); } } }); 

在Application.hbs中

 
Welcome to {{appName}}
 
 {{#each linksArray as |item|}} {{component 'link-to' item.value item.route }} {{/each}} Add Item 
 {{outlet}}