Javascript 在{{each}}在ember.js中呈现后调用代码?

Javascript 在{{each}}在ember.js中呈现后调用代码?,javascript,jquery,html,ember.js,ember-data,Javascript,Jquery,Html,Ember.js,Ember Data,我试图在一个Ember{{{each}}标记完成对其项的循环后调用一些代码。我见过其他类似的问题,答案总是在视图上实现didinertelement。这对我来说似乎不起作用,因为我正在尝试访问未在视图中呈现的html对象,因为它们位于{{each}中 下面是我的html的外观 <script type="text/x-handlebars" id="user"> {{#if isEditing}} <div class="well"> {{partia

我试图在一个Ember{{{each}}标记完成对其项的循环后调用一些代码。我见过其他类似的问题,答案总是在视图上实现didinertelement。这对我来说似乎不起作用,因为我正在尝试访问未在视图中呈现的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>

当我试着运行它时,只要我点击编辑按钮并部分加载,我就会在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));
  }
});

如果你能把这个放到jsbin中来说明你的问题,那将真正帮助我们帮助你:你想对这个按钮做什么?更有可能的是,您可以使用更惯用的方法避免直接的DOM操作。@sunrize920的建议是,您可以在diInsertElement中使用jQuery委托,但您没有发布足够的上下文,我无法告诉您这是否是适合您的解决方案。委托将侦听选择器上的事件,即使它们是在创建委托后添加到DOM中的;不要只是过去的代码
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));
  }
});