在插入子元素之前觸發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事件

回答

相關問題