Ember.js Chosen integration

Question

I\'ve done a sample Ember.js integration with Chosen (https://github.com/harvesthq/chosen)

Coffeescript:

App.ChosenSelectView = Em.S         


        

Answer 1

I think the problem is that your observer is notified kind of too early, meaning that the changes have not yet been written to the DOM.

I've hacked a little around and in the end I came up with a solution, which calls Ember.run.sync() before the event for the chosen plugin is triggered, see http://jsfiddle.net/pangratz666/dbHJb/

Handlebars:

​

JavaScript:

App = Ember.Application.create({});

App.items = Ember.ArrayProxy.create({
    content: [Ember.Object.create({
        id: 1,
        name: 'First item'
    }), Ember.Object.create({
        id: 2,
        name: 'Second Item'
    })]
});

Ember.View.create({
    templateName: 'selectTmpl',
    itemsBinding: 'App.items',

    didInsertElement: function() {
        this.$('select').chosen();
    },

    itemsChanged: function() {
        // flush the RunLoop so changes are written to DOM?
        Ember.run.sync();
        // trigger the 'liszt:updated'
        Ember.run.next(this, function() {
            this.$('select').trigger('liszt:updated');
        });
    }.observes('items.@each.name')
}).append();

Ember.run.later(function() {
    // always use Ember.js methods to acces properties, so it should be 
    // `App.items.objectAt(0)` instead of `App.items.content[0]`
    App.items.objectAt(0).set('name', '1st Item');
}, 1000);​