Javascript 插入子元素之前触发的didInsertElement事件

要使用插件，应该在 在浏览器中使用选项渲染“选择”。但是，使用ember didInsertElement不起作用，因为回调是在插入标记之前触发的

我试过这个：

App.ColorSelector = Ember.Select.extend({
  _initialize: function() {
    console.log(this.$().find('option').size()); // logs 0
    this.$().colorselector();
  }.on('didInsertElement');
});

App.ColorSelector = Ember.Select.extend({
  _initialize: function() {
    Ember.run.scheduleOnce('afterRender', this, function() {
      console.log(this.$().find('option').size()); // logs 0
      this.$().colorselector();
    });
  }.on('didInsertElement');
});

编辑： 使用@SeanK建议：

App.ColorSelector = Ember.Select.extend({
  didInsertElement: function() {
      console.log(this.$().find('option').size()); // logs 0
      this.$().colorselector();
  }
});

---

如何在ember插入with all标记后运行colorselector函数调用？

是否尝试覆盖didInsertElement函数并从那里调用colorselector，而不是让函数观察didInsertElement

App.ColorSelector = Ember.Select.extend({
  didInsertElement: function() {
    this.$().colorselector();
  }
});

---

您是否尝试重写didInsertElement函数并从那里调用colorselector，而不是让函数观察didInsertElement

App.ColorSelector = Ember.Select.extend({
  didInsertElement: function() {
    this.$().colorselector();
  }
});

---

这在Ember 1.7.0上对我来说很好

App = Em.Application.create();

App.ApplicationController = Ember.Controller.extend({
    colors: ['blue', 'green']
});

App.ColorSelector = Ember.Select.extend({
  didInsertElement: function() {
    console.log(this.$().find('option').size()); // logs 2
    //this.$().colorselector();
  }
});

Ember.Handlebars.helper('color-selector', App.ColorSelector);

模板：

<script type="text/x-handlebars">
    {{color-selector content=colors}}
</script>

---

这在Ember 1.7.0上对我来说很好

App = Em.Application.create();

App.ApplicationController = Ember.Controller.extend({
    colors: ['blue', 'green']
});

App.ColorSelector = Ember.Select.extend({
  didInsertElement: function() {
    console.log(this.$().find('option').size()); // logs 2
    //this.$().colorselector();
  }
});

Ember.Handlebars.helper('color-selector', App.ColorSelector);

模板：

<script type="text/x-handlebars">
    {{color-selector content=colors}}
</script>

---

事实上，作为最佳实践，您应该这样做：

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
  colors: ['blue', 'green']
});

App.ColorSelector = Ember.Select.extend({
  didInsertElement: function() {
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    },

  afterRenderEvent: function(){
     console.log(this.$().find('option').size()); // logs 2
     this.$().colorselector();
  }
});

Ember.Handlebars.helper('color-selector', App.ColorSelector);

---

事实上，作为最佳实践，您应该这样做：

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
  colors: ['blue', 'green']
});

App.ColorSelector = Ember.Select.extend({
  didInsertElement: function() {
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
    },

  afterRenderEvent: function(){
     console.log(this.$().find('option').size()); // logs 2
     this.$().colorselector();
  }
});

Ember.Handlebars.helper('color-selector', App.ColorSelector);

使用Ember.run.next：

使用Ember.run.next：

---

谢谢你们，但问题不在于部件。组件的内容是我在setupController函数中创建的：

setupController: (controller, model) ->
  this._super(controller,model);
  controller.set 'colors', this.store.find 'color'

当调用didInsertElement函数时，数组还没有完成。 为了解决这个问题，我添加了以下条件：

{{#if colors.isFulfilled }}
  {{color-selector content=colors value=color }}
{{/if}}

---

谢谢你们，但问题不在于部件。组件的内容是我在setupController函数中创建的：

setupController: (controller, model) ->
  this._super(controller,model);
  controller.set 'colors', this.store.find 'color'

当调用didInsertElement函数时，数组还没有完成。 为了解决这个问题，我添加了以下条件：

{{#if colors.isFulfilled }}
  {{color-selector content=colors value=color }}
{{/if}}

---

嗨@Seank，这也不行。我用你的建议编辑了我的答案。嗨@Seank，这也不管用。我根据您的建议编辑了我的答案。请尝试将您的console.log调用移动到调用colorselector之后。您正在输出其插入之前的大小。这会改变日志输出吗？不要改变@SeanK。问题是：调用函数didInsertElement时，选项尚未插入。我需要将colorselector调用移动到Ember后插入所有标记。啊，我明白了，所以您在模板中的标记上指定的内容还不在DOM中。这很奇怪。您是如何设置内容阵列的？我很好奇如果你给colorselector的调用增加延迟会发生什么。尝试将它包含在一个Ember.run.later调用中，并给它一个延迟，比如说半秒钟，看看这是否会改变情况。在这种情况下，Ember.Select视图也可能不是正确的选择-它可能与引导之类的东西不匹配。您可以尝试创建自己的自定义视图或组件。一个突变事件，用于监视DOM中的更改，用户是否触发。当选项元素被添加到select中时，该处理程序可能会捕获，并且您可以执行自己的操作。但是，这可能会减慢应用程序的速度，因此请使用它一次并删除处理程序，然后调用颜色选择器。“不是超级强的解决方案。”MilkyWayJoe，我认为余烬有一种简单的方法。类似于尝试将console.log调用移动到调用colorselector之后。您正在输出其插入之前的大小。这会改变日志输出吗？不要改变@SeanK。问题是：调用函数didInsertElement时，选项尚未插入。我需要将colorselector调用移动到Ember后插入所有标记。啊，我明白了，所以您在模板中的标记上指定的内容还不在DOM中。这很奇怪。您是如何设置内容阵列的？我很好奇如果你给colorselector的调用增加延迟会发生什么。尝试将它包含在一个Ember.run.later调用中，并给它一个延迟，比如说半秒钟，看看这是否会改变情况。在这种情况下，Ember.Select视图也可能不是正确的选择-它可能与引导之类的东西不匹配。您可以尝试创建自己的自定义视图或组件。一个突变事件，用于监视DOM中的更改，用户是否触发。当选项元素被添加到select中时，该处理程序可能会捕获，并且您可以执行自己的操作。但是，这可能会减慢应用程序的速度，因此请使用它一次并删除处理程序，然后调用颜色选择器。“不是超级强的解决方案。”MilkyWayJoe，我认为余烬有一种简单的方法。差不多