在 {{#each}} 之后调用代码已在 ember.js 中呈现

Calling code after {{#each}} has rendered in ember.js?

本文关键字：js ember 代码 #each 之后 调用      更新时间：2023-09-26

我试图在 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));
  }
});
相关文章：