6

我想在 ember 绑定同步并且 DOM 再次更新时做一些事情。

我已经尝试使用操作绑定模型的函数的回调，执行回调时 DOM 不会更新。

我已经尝试直接在模型上使用观察者，执行观察者时不会更新 DOM。

我已经尝试在绑定上使用观察者，执行观察者时不会更新 DOM。

例如

App.view = Ember.View.extend({
    modelBinding: 'App.model',
    modelChanged : function() {
        window.scrollTo(0, document.body.scrollHeight);
    }.observes('model'),

    getMore: function(event) {
        App.set('model', "somethingnew");
    }
});

当我触发“gotMore”时，我会更新模型，当模型更新并呈现其更改时，我想向下滚动。

在我尝试过的任何一种方式中，我都无法获得新的scrollHeight。在这些事件之后几毫秒设置它。

这是关于 jsFiddle 的示例：http: //jsfiddle.net/kcjzw/15/

4

2 回答 2

7

此处记录了执行此操作的正确方法：

http://emberjs.com/api/classes/Ember.run.html#method_next

modelChanged : function() {
  Ember.run.scheduleOnce('afterRender', this, function() {
    window.scrollTo(0, document.body.scrollHeight);
    $('body').append('New scroll height: '+document.body.scrollHeight);
  });
}.observes('content')
于 2014-01-17T15:23:42.300 回答
2

采用Ember.run.next

https://github.com/emberjs/ember.js/blob/master/packages/ember-metal/lib/run_loop.js#L531-566

App.view = Ember.View.extend({
    modelBinding: 'App.model',
    modelChanged : function() {
        Ember.run.next(myContext, function(){
            // code to be executed in the next RunLoop, which will be scheduled after the current one
            window.scrollTo(0, document.body.scrollHeight);
        });
    }.observes('model'),

    getMore: function(event) {
        App.set('model', "somethingnew");
    }
});

更新

看看这个：http: //jsfiddle.net/ud3323/hZ7Vx/

您需要的是在渲染助手将创建Ember.CollectionView的runloop 之后运行您的代码。{{each}}

JavaScript：

App = Ember.Application.create();

App.model = Ember.Object.create({
    items: [1]
});

App.view = Ember.Handlebars.EachView.extend({
    contentBinding: 'App.model.items',

    itemViewClass: Ember._MetamorphView.extend({
        templateName: 'the_template'
    }),

    modelChanged : function() {
        Ember.run.next(this, function(){
            window.scrollTo(0, document.body.scrollHeight);
            $('body').append('New scroll height: '+document.body.scrollHeight);
        });
    }.observes('content'),

    theAction: function(event) {
        App.controller.doStuffToModel();
    }
});

App.controller = Ember.Object.create({
    doStuffToModel : function() {
        App.model.set('items', [1,2,3,4,5]);
    }
});

车把：

<script type="text/x-handlebars" data-template-name="the_template">
    <div style="height:200px;"></div> 
</script>

<script type="text/x-handlebars">
    {{view App.view}}
</script>​
于 2012-05-21T15:15:41.317 回答