En utilisant Ember.js, comment exécuter un JS après une vue rendue?

Question

Comment exécuter une fonction après une vue de bilaire insérée dans le DOM?

Voici mon cas d'utilisation: je voudrais utiliser jQuery UI Triable pour permettre le tri.

Answer 1

Vous devez remplacer didInsertElement Comme il est "appelé lorsque l'élément de la vue a été inséré dans le dom. Remplacez cette fonction pour faire toute configuration qui nécessite un élément dans le corps du document".

À l'intérieur de didInsertElement rappel, 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

Answer 2

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

Answer 3

Ember 2.x: la vue est obsolète, utilisez le composant à la place

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, redimensionnés et finalement supprimés, Ember fournit des crochets 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/

En général, didInsertElement est un endroit idéal pour s'intégrer avec 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 le composant $() méthode.

Dans vous avez besoin de JavaScript pour s'exécuter chaque fois que les attributs changent

Exécutez votre code à l'intérieur didRender accrocher.

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

Answer 4

Commençant par Ember 3.13, vous pouvez utiliser des composants qui héritent de Glimmer, et cet exemple ci-dessous montre à quoi cela pourrait ressembler:

import Component from '@glimmer/component';
import { action } from '@ember/object';

/* global jQuery */

export default class MyOctaneComponent extends Component {
  @action configureSorting(element) {
    jQuery(element).sortable();
  }
}

<div {{did-insert this.configureSorting}}>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

Ces composants de style de vue n'ont pas directement de crochets de cycle de vie, vous pouvez plutôt utiliser rendements-modificateurs Pour attacher une fonction. Introduction non officielle aux modificateurs peut être trouvé ici

L'avantage de cela est que, il est plus clair quelles sont les responsabilités du modèle et deviennent.

Voici une boîte de codes et boîte si vous voulez jouer avec ceci:https://codesandbox.io/s/octane-starter-ftt8s

Answer 5

Vous devez tirer ce que vous voulez dans le didInsertElement rappel à votre avis:

MyEmberApp.PostsIndexView = Ember.View.extend({

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

});