Zrobić coś, gdy ember jest wykonywany z aktualizacjami DOM

Question

Chcę robić rzeczy, gdy wiązania ember zostały zsynchronizowane i DOM jest ponownie aktualny.

Próbowałem z wywołania zwrotnego z funkcji, która manipuluje modelu powiązanego, DOM nie jest aktualizowany po wykonaniu wywołania zwrotnego.

Próbowałem z obserwatorem bezpośrednio na modelu, DOM nie jest aktualizowany, gdy obserwator jest wykonywany.

Próbowałem z obserwatorem na powiązanie, DOM nie jest aktualizowany, gdy obserwator jest wykonywany.

np.

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"); 
    } 
}); 

Kiedy ognia „gotMore” zaktualizować model, a kiedy model jest aktualizowana i jej zmiany zostały wygenerowana Chcę, aby przewinąć w dół.

W żaden ze sposobów, które próbowałem, nie byłem w stanie uzyskać nowego scrollHeight. Ustawiany jest kilka ms po tych zdarzeniach.

Oto przykład na jsFiddle: http://jsfiddle.net/kcjzw/15/

Answer 1

Prawidłowe sposobem na to jest udokumentowane tutaj:

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') 

Answer 2

Zastosowanie 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"); 
    } 
}); 

Aktualizacja

Spójrz na to: http://jsfiddle.net/ud3323/hZ7Vx/

Potrzebne jest uruchomienie kodu po runlerze, który renderuje Ember.CollectionView, który tworzy helper {{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]); 
    } 
}); 

Kierownice:

<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>​