web-dev-qa-db-fra.com

En utilisant Ember.js, comment exécuter JS après le rendu d’une vue?

Comment exécuter une fonction après l'insertion d'une vue Ember dans le DOM?

Voici mon cas d'utilisation: j'aimerais utiliser l'interface utilisateur jQuery triable pour permettre le tri.

ember.js
43
Marc Hughes

Vous devez remplacer didInsertElement car "Appelé lorsque l'élément de la vue a été inséré dans le DOM. Remplacez cette fonction pour effectuer toute configuration nécessitant un élément dans le corps du document".

À l'intérieur du rappel didInsertElement, vous pouvez utiliser this.$() pour obtenir un objet jQuery pour l'élément de la vue.

Référence: https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

64
Roy Daniels

Vous pouvez également utiliser la méthode afterRender 

didInsertElement: function () {
Ember.run.scheduleOnce('afterRender', this, function () {
     //Put your code here what you want to do after render of a view
    });
}
1
Jyoti

Ember 2.x: la vue est obsolète, utilisez plutôt le composant

Vous devez comprendre le cycle de vie du composant pour savoir quand certaines choses se produisent.

Au fur et à mesure que les composants sont rendus, restitués et finalement supprimés, Ember fournit des points d'ancrage de cycle de vie qui vous permettent d'exécuter du code à des moments spécifiques de la vie d'un composant.

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

De manière générale, didInsertElement est un excellent endroit pour intégrer des bibliothèques tierces.

Ce crochet garantit deux (2) choses,

  1. L'élément du composant a été créé et inséré dans le DOM.
  2. L'élément du composant est accessible via la méthode $() du composant.

Dans vous avez besoin de JavaScript pour fonctionner à chaque changement d'attribut

Exécutez votre code dans le crochet didRender.

Encore une fois, veuillez lire la documentation sur le cycle de vie ci-dessus pour plus d'informations

0
Xinyang Li

Vous devez déclencher ce que vous voulez dans le rappel didInsertElement dans votre vue:

MyEmberApp.PostsIndexView = Ember.View.extend({

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

});
0
sergserg