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

要使用colorselector插件，colorselector()函数应在在浏览器中使用选项呈现select后调用。但是，使用ember didInsertElement不起作用，因为在插入<option>标签之前触发了回调！在插入子元素之前触发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(); 
    } 
});

如何运行烬后colorselector()函数调用插入<select>所有<option>标签？

来源

2014-10-02 Rodrigo

尝试移动你的console.log调用是后您的来电colorselector（）。您在插入前输出大小。这会改变日志输出吗？ – SeanK 2014-10-02 15:08:07

不要更改@SeanK。问题是：当函数didInsertElement被调用时，选项尚未插入。我需要将'colorselector（）'调用移至Ember后面插入所有

啊，我明白了，所以您在模板中的标签上指定的内容尚未在DOM中。这很奇怪。你是如何设置你的内容数组的？我很好奇，如果给colorselector（）调用添加延迟，会发生什么情况。尝试将它包含在Ember.run.later调用中，并延迟一段时间，比如说半秒，然后看看是否会改变事情。也有可能在这种情况下Ember.Select视图不是正确的选择 - 它可能无法与Bootstrap之类的东西配合良好。您可以尝试创建自己的自定义视图或组件。 – SeanK 2014-10-02 15:33:30

谢谢你们，但问题不是组件。成分的含量是一个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}}

来源

2014-10-10 13:39:40 Rodrigo

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

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

来源

2014-10-02 14:55:35 SeanK

嗨@Seank，这不起作用。我用你的建议编辑了我的答案。 – Rodrigo 2014-10-02 15:00:14

这一切正常，我在灰烬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>

来源

2014-10-06 19:22:48 Jakeii

其实，作为最佳实践，你应该做这样的事情：

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

来源

2014-10-08 17:37:16 prabhash

使用Ember.run.next()：

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

来源

2014-10-09 05:28:22 chopper

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

回答

相关问题