Question

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

$(.test).append(<a {{action "getData"}}>Get Data</a>);

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

我想做的另一种方式是：

 //create the element
 $(.test).append(<a id="idnum">Get Data</a>);

 //make click listener
 $('#idnum').click(function(){
 console.log("get data");
}

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

Answer 1

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

{{#if canGetData}}
<a {{action "getData"}}>Get Data</a>
{{/if}}

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

Answer 2

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

在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中的

<h1>Welcome to {{appName}}</h1>
<br>
{{#each linksArray as |item|}}
 {{component 'link-to' item.value item.route }}
{{/each}}
<button {{action 'addItem'}}>Add Item</button>
<br>
{{outlet}}
<br>
<br>

Answer 3

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

然而，第二个例子是如果你必须依赖外部代码进行手动DOM操作的方法。它工作。结帐this旋转。

这确实有效：

this.$('.target').append('<a id="idnum">Get Data</a>');

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

确保DOM准备就绪。所以在didInsertElement钩子中或在用户点击按钮之后这样做。

Ember生成动作或jquery onclick

3 个答案: