Czy jest hak zmiany po obejrzeniu (podobnie jak didInsertElement)?

Question

Korzystając z haka didInsertElement, mogę przeprowadzić inicjalizację wtyczki jQuery, która jest potrzebna. Jeśli jednak właściwość ulegnie zmianie, Ember ponownie wyświetli widok, ale nie wywoła ponownie numeru didInsertElement. Prawdopodobnie dzieje się tak dlatego, że element jest już w DOM i zmieniły się tylko niektóre elementy.

Moje pytanie brzmi, czy istnieje sposób mogę zastąpić, lub jakiś inny sposób dostępu, co zostało wydane do DOM przez Ember.ViewPO jego faktycznie włożonej do DOM?

Próbowałem użyć afterRender, ale to nie zadziałało.

Answer 1

Niestety niektóre [...] moderator usunięte mój oryginalny odpowiedź mimo że był upvoted ... SHM

odpowiedź oryginalny: Spójrz na ten artykuł przez Yehuda Katz http://yehudakatz.com/2011/06/11/using-sproutcore-2-0-with-jquery-ui/. Jest stara i część kodu wymaga modyfikacji, aby działała z obecnym interfejsem Embera, ale jest dobrym przykładem na to, jak integrować zewnętrzne frameworki i wtyczki z Ember.

Answer 2

naprawiłem ten sam problem jak poniżej:

Ember.run.sync(); //force applying bindings 
//run after 100ms your code 
Ember.run.later(function() { 
    //your code 
}, 100); 

EDIT: ponieważ jest to stara odpowiedź, to może być przestarzały w bieżącym EmberJS zwolnić

Answer 3

Można również podpiąć do childViews tablica i obserwuj zmiany w tym zakresie.

Coś takiego działa, ale uważam, że nie jest to dobra praktyka.

childViewsArrayDidChange: function() { 
    console.log("childViews-Array did change"); 
}.observes('childViews.@each') 

Answer 4

Wpadłem na nieco nietypowy sposób rozwiązania tego problemu. Możesz make a handlebars helper uruchamiać zdarzenie, gdy część widoku zostanie ponownie wyświetlona. Używałem Bootstrap i jqPlot i musiałem być w stanie powiedzieć, powiedzmy, kiedy div był dostępny do narysowania wykresu. Z moim pomocnikiem możesz to zrobić:

{{#if dataIsLoaded}} 
    {{trigger didRenderChartDiv}} 
    <div id="chartHost"></div> 
{{/if}} 

Answer 5

Nie jestem pewien, czy pytanie jest nadal aktualne, ponieważ minęło trochę czasu. ale nie wybrano żadnej odpowiedzi. Wystąpił podobny problem, gdy chcę wyświetlić formularz na podstawie właściwości kontrolera. Po wyświetleniu formularza chciałbym uruchomić niektóre javascript do wiązania procedur obsługi zdarzeń.

Jednak JavaScript nie związał poprawnie procedur obsługi zdarzeń, ponieważ elementy nie były wyświetlane po uruchomieniu didInsertElement.

Moje rozwiązanie jest następujące,

Controller & Zobacz

App.FormController = Ember.Controller.extend({ 

    myViewVisible : false, 

    actions : { 

     toggleForm : function(){ 
      this.toggleProperty('myViewVisible'); 
      console.log(this.get('myViewVisible')); 
     } 

    } 
}); 

App.FormView = Ember.View.extend({ 

    isVisible:function(){ 
     this.rerender(); 
    }.property('controller.myViewVisible'), 

    didInsertElement : function(){ 
     // Do JS stuff 
    } 

}); 

A szablon

<script type="text/x-handlebars" data-template-name="form"> 
     <h2>Form</h2> 
     <button {{action 'toggleForm'}}>Toggle form</button> 
     {{#if myViewVisible}} 
     {{partial "tform"}} 
     {{else}} 
     <p>Click button to show form</p> 
     {{/if}} 
    </script> 

Widok wiąże właściwość kontrolera. Po zmianie tej właściwości funkcja isVisible kopie i ponownie wyświetla widok.Powoduje, że didInsertElement ponownie strzela i wiąże kod JS z dostępnymi już elementami DOM.

Mam nadzieję, że to pomoże.