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、{{each}}ヘルパーが作成するをレンダリングするrunloopの後にコードを実行することです。

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 に答える