Question

要使用colorselector插件，应在之后调用colorselector()函数在浏览器中使用选项渲染选择。但是，使用ember didInsertElement不起作用，因为在插入<option>标签之前触发了回调！

我试过了：

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中插入colorselector()所有<select>个标签后，如何运行<option>函数调用？

Answer 1

这对我来说在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>

Answer 2

您是否尝试重写didInsertElement函数并从那里调用colorselector（）而不是使用函数observe didInsertElement？

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

Answer 3

实际上，作为一种最佳实践，你应该做这样的事情：

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);

Answer 4

使用Ember.run.next()：

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

Answer 5

谢谢大家，但问题不在于组件。组件的内容是PromiseArray，我在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}}

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

5 个答案: