我试图在 Ember {{#each}}
标签完成循环遍历其项目后调用一些代码。我见过其他看起来相似的问题,答案总是在视图上实现didInsertElement
。这似乎对我不起作用,因为我正在尝试访问未使用视图呈现的 html 对象,因为它们位于{{#each}}
中。
这是我的html的样子。
<script type="text/x-handlebars" id="user">
{{#if isEditing}}
<div class="well">
{{partial 'user/edit'}}
<button {{action 'doneEditing'}} class="btn btn-default">Save</button>
<button {{action 'cancelEditing'}} class="btn btn-default">Cancel</button>
</div>
{{else}}
<button {{action 'edit'}} class="btn btn-default">Edit</button>
{{/if}}
</script>
<script type="text/x-handlebars" id="user/edit">
{{#view 'editor'}}
<div id="sList" class="btn-group-vertical" role="group">
{{#each s in model}}
<button class="btn btn-default">
{{s.theme}}
</button>
{{/each}}
</div>
{{/view}}
</script>
还有我的JavaScript
App.UserRoute = Ember.Route.extend({
model: function(params) {
return this.store.all('strength')
}
});
App.UserController = Ember.ObjectController.extend({
isEditing: false,
actions: {
edit: function(){
this.set("isEditing", true);
},
doneEditing: function(){
this.set("isEditing", false);
},
cancelEditing: function(){
this.set("isEditing", false);
}
}
});
App.EditorView = Ember.View.extend({
didInsertElement: function() {
//Do something to the button elements
}
});
当我尝试运行它时,一旦我点击编辑按钮并部分加载,didInsertElement
尝试访问按钮元素后,我在控制台中出现错误。就好像div 中的元素还没有渲染一样。那么我如何判断{{#each}}
是否完成了将元素插入到 html 中?我知道这可能会令人困惑,但任何和所有的帮助都是值得赞赏的。
安排 afterRender 队列中的代码在呈现视图内容后运行。
App.EditorView = Ember.View.extend({
didInsertElement: function() {
Ember.run.schedule('afterRender', function() {
this.$().find('button').each(function() {
// $(this) is a button in this function
});
}.bind(this));
}
});