Run controller event after render in Ember without View - ember.js

Question

I'm new with Ember and what I want to do is execute some initialization with jQuery like this: Ember.$("select").selectpicker(); to customize default select (it actually inserts div that represents the hidden select). I used to have this code in my Controller:
init() {
this._super();
Ember.run.schedule("afterRender", this, function() {
this.send("initializeJQuery");
}
});
actions: {
initializeJQuery() {
Ember.$("select").selectpicker();
}
}
It really initializes my select tags, but when I transition to another route and go back – it rerenders and doesn't want to call initializeJQuery method despite the run method (not runOnce). I use Ember v1.13 and Views are deprecated so I'm looking for alternative way to do this.
Hope for your help.

Answer 1

init is only called once, because controllers are singletons. Typically these things are put in didInsertElement, preferably in a component. But to show you what's happening consider this:
App.IndexController = Ember.Controller.extend({
init: function(){
console.log("I get called once");
}
});
App.IndexView = Ember.View.extend({
didInsertElement: function(){
console.log("I get called every time Index is rendered");
}
});
JSBin: http://emberjs.jsbin.com/xacosekuku/edit?html,css,js,output
Now what you actually want to do is make a component. For instance you can do this:
App.SelectPickerComponent = Ember.Component.extend({
tagName: 'select',
didInsertElement: function(){
this.$().selectpicker();
}
});
Then in your template do:
{{#select-picker}}
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
{{/select-picker}}
Something like this (but with our jQuery call added): http://emberjs.jsbin.com/xacosekuku/2/edit?html,css,js,output