Wie führe ich mit Ember.js JS aus, nachdem eine Ansicht gerendert wurde?

Question

Wie führe ich eine Funktion aus, nachdem eine Ember-Ansicht in das DOM eingefügt wurde?

Hier ist mein Anwendungsfall: Ich möchte die sortierbare jQuery-Benutzeroberfläche verwenden, um das Sortieren zu ermöglichen.

Answer 1

Sie müssen didInsertElement überschreiben, da er "Wird aufgerufen, wenn das Element der Ansicht in das DOM eingefügt wurde. Überschreiben Sie diese Funktion, um alle Einstellungen vorzunehmen, für die ein Element im Dokumententext erforderlich ist."

Innerhalb des didInsertElement-Rückrufs können Sie this.$() verwenden, um ein jQuery-Objekt für das Element der Ansicht abzurufen.

Referenz: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

Answer 2

Sie können auch Nachrender-Methode verwenden generasacodicetagpre.

Answer 3

Ember 2.x: Ansicht ist veraltet. Verwenden Sie stattdessen die Komponente

Sie müssen den Lebenszyklus der Komponente verstehen, um zu wissen, wann bestimmte Dinge passieren.

Beim Rendern, erneuten Rendern und endgültigen Entfernen von Komponenten bietet Ember Lifecycle-Hooks, mit denen Sie Code zu bestimmten Zeiten im Leben einer Komponente ausführen können.

https://guides.emberjs.com/v2. 6.0 / components / the-component-lifecycle /

Generell ist didInsertElement ein großartiger Ort für die Integration in Bibliotheken von Drittanbietern.

Dieser Haken garantiert zwei (2) Dinge,

1. Das Element der Komponente wurde erstellt und in das DOM eingefügt.
2. Auf das Element der Komponente kann über die $()-Methode der Komponente zugegriffen werden.

   In benötigen Sie JavaScript, um ausgeführt zu werden, wenn sich die Attribute ändern

   Führen Sie Ihren Code im didRender-Hook aus.

   Weitere Informationen finden Sie in der obigen Lebenszyklusdokumentation

Answer 4

Beginnend mit ember 3.13 , Sie könnenVerwenden Sie Komponenten, die von GLIMMER erben, und dieses nachstehende Beispiel zeigt, wie das aussehen könnte: generasacodicetagpre.

Diese Ansichtstilkomponenten haben keine Lebenszyklushaken direkt, stattdessen können Sie , um eine Funktion anzubringen.Inoffizielle Einführung in die Modifikatoren Hier finden Sie

Der Vorteil davon ist, dass es klarer ist, was die Verantwortlichkeiten der Vorlage sind und werden.

Hier ist eine ausgeführbare CodesUndbox, wenn Sie mit diesem spielen möchten: https://codesandbox.io/s/octan-starter-ftt8s .

Answer 5

Sie müssen im didInsertElement-Rückruf in Ihrer Ansicht alles auslösen, was Sie wollen:

MyEmberApp.PostsIndexView = Ember.View.extend({

  didInsertElement: function(){
    // 'this' refers to the view's template element.
    this.$('table.has-datatable').DataTable();
  }

});