Utilizzando Ember.js, come eseguo alcuni JS dopo il rendering di una vista?

Question

Come si esegue una funzione dopo che una vista Ember è stata inserita nel DOM?

Ecco il mio caso d'uso: vorrei utilizzare jQuery UI sortable per consentire l'ordinamento.

Answer 1

Devi sovrascrivere didInsertElement in quanto è "Chiamato quando l'elemento della vista è stato inserito nel DOM. Sostituisci questa funzione per eseguire qualsiasi configurazione che richieda un elemento nel corpo del documento."

All'interno del callback didInsertElement, puoi utilizzare this.$() per ottenere un oggetto jQuery per l'elemento della vista.

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

Answer 2

Puoi anche utilizzare il metodo 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: View è obsoleto, utilizza invece il componente

Devi comprendere il ciclo di vita del componente per sapere quando accadono determinate cose.

Man mano che i componenti vengono renderizzati, ri-renderizzati e infine rimossi, Ember fornisce hook del ciclo di vita che consentono di eseguire codice in momenti specifici della vita di un componente.

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

Generalmente, didInsertElement è un ottimo posto per l'integrazione con librerie di terze parti.

Questo hook garantisce due (2) cose,

1. L'elemento del componente è stato sia creato che inserito nel DOM.
2. L'elemento del componente è accessibile tramite il metodo $() del componente.

In è necessario che JavaScript venga eseguito ogni volta che gli attributi cambiano

Esegui il tuo codice all'interno dell'hook didRender.

Ancora una volta, leggi la documentazione del ciclo di vita sopra per ulteriori informazioni

Answer 4

A partire da Ember 3.13 , puoiusa componenti che ereditano da Glimmer, e questo esempio sotto mostra come potrebbe apparire:

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>

Questi componenti dello stile di visualizzazione non hanno direttamente hook del ciclo di vita, ma puoi utilizzare render-modificatori per allegare una funzione.Un'introduzione non ufficiale ai modificatori può essere trovata qui

Il vantaggio di questo è che è più chiaro quali sono e diventano le responsabilità del modello.

Ecco un codice eseguibile e una casella se vuoi giocare con questo: https://codesandbox.io/s/octane-starter-ftt8s

Answer 5

Devi attivare tutto ciò che desideri nel callback didInsertElement nella tua vista:

MyEmberApp.PostsIndexView = Ember.View.extend({

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

});