ember.js - Ember.Select with custom plugin: how to bind the two? -

ember.js - Ember.Select with custom <select> plugin: how to bind the two? -

in our app, replace standard select jquery plugin able style selects in css. trying create work ember solution dirty. there proper way this?

i think key issue kind of plugins need html rendered in page update themselves. yet, ember bindings fire before html rendered in page.

ember.select.reopen({ didinsertelement: function(){ this.$().selectbox(); // create jquery plugin }, valuechanged: function(){ this.$().selectbox('value', this.get('value')); // update plugin value }.observes('value'), contentchanged: function(){ this.set('value', "-10"); // false value, forcefulness cache. othwerwise won't refresh if previous value "0". this.set('value', "0"); // default value new content. // alternative 1: manually "re-create" plugin using 'content' - fails with: // uncaught error: cannot perform operations on metamorph not in dom. // , anyway means 'content' needs have specific format not great. var contentasjson = {}; this.get('content').foreach(function(val){contentasjson[val.get('id')] = val.get('displayname')}); this.$().selectbox('destroy'); this.$().selectbox(); this.$().selectbox('options', contentasjson); this.$().selectbox('value', this.get('value')); // options 2: wait actual html rendered timer. "works" terrible guess // rely on timer. var self = this.$(); settimeout(function(){self.selectbox('refresh')}, 100); }.observes('content') });

i realize don't need hear value changer because selectbox actively updating both dom element , plugin itself. simple trace in valuechanged observer tell lot of thing.

based on question come out little snippet. in fact think it's original method.

jsfiddle example

ember.select.reopen({ didinsertelement: function(){ this.set('value', null); this.$().selectbox(); // create jquery plugin }, contentchanged: function() { //ember.run.next equivalent settimeout(fn,1); //we want wait contentchanged first finish //then rerender selectbox. //to construction of key-value tedious //just rerender instead. ember.run.next(this, function() { this.$().selectbox('refresh'); }); //reset selection value if insist //this.set('value', null); }.observes('content') });

i think ok settimeout since need wait content rendered first. refresh shouldn't heavy.

ember.js