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.
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
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
});
}
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,
$()
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
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();
}
});