Ember.js选择整合

Question

我已经完成了与Chosen集成的Ember.js示例(https://github.com/harvesthq/chosen)

CoffeeScript的:

App.ChosenSelectView = Em.Select.extend({
  didInsertElement: ->
    @_super()
    @$().chosen()
    # Assumes optionLabelPath is something like "content.name"
    @addObserver(@get("optionLabelPath").replace(/^content/, "content.@each"), ->  @contentDidChange())
  contentDidChange: ->
    # 2 ticks until DOM update
    Em.run.next(this, (-> Em.run.next(this, (-> @$().trigger("liszt:updated")))))
})

困扰我的是我在触发Chosen小部件更新之前我不需要多少时间.从我的实验中可以看出2个循环是可以的,但也许有更好的方法可以用于整个过程？

jsfiddle的完整示例:http://jsfiddle.net/oruen/qfYPy/

Answer 1

我认为问题是你的观察者得到了太早的通知,这意味着这些变化尚未写入DOM.

我已经攻击了一下,最后我想出了一个解决方案,Ember.run.sync()在chosen插件事件被触发之前调用,请参阅http://jsfiddle.net/pangratz666/dbHJb/

把手:

<script type="text/x-handlebars" data-template-name="selectTmpl" >
    {{#each items tagName="select" }}
        <option {{bindAttr value="id"}} >{{name}}</option>    
    {{/each}}
</script>?

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