Comment utiliser le plugin jsTree dans Ember

J’ai utilisé le plugin jsTree pour rendre un grand nombre de nœuds d’arbre dans mon produit.

Maintenant, je suis en train de passer à Ember, et je dois implémenter le plugin jsTree dans Ember.

J’ai écrit un composant Ember pour rendre ma structure de dossiers en utilisant jsTree.

Mon composant:

 
Tree Data
App.TempTreeComponent = Ember.Component.extend({ didInsertElement: function(){ var self = this; self.$().jstree({ 'plugins':["contextmenu", "dnd"], 'core' : { 'data' : [ 'Simple root node', { 'text' : 'Root node 2', 'state' : { 'opened' : true, 'selected' : true }, 'children' : [ {'text' : 'Child 1'}, 'Child 2' ] } ], 'check_callback': true } }) .on('rename_node.jstree', function(e, data) { alert('rename'); }) .on('delete_node.jstree', function(e, data) { alert('delete'); }); }, actions: {} });

JSBIN Demo

Dans mon composant pour chaque action effectuée sur l’arbre, jsTree déclenche un événement correspondant à l’événement.

J’avais l’habitude d’écouter les événements et de faire les actions nécessaires si nécessaire.

Fondamentalement, jsTree met à jour le DOM et déclenche l’événement.

Mais dans Ember, nous ne mettrons pas à jour le DOM, mais nous avons besoin de mettre à jour le modèle sous-jacent et par deux voies, la liaison de données que le DOM est mise à jour par Ember.

Ici, je vais contre les conventions sur la braise.

Est-ce que je vais dans la bonne direction?

Existe-t-il un autre moyen d’utiliser jsTree avec Ember?

Ou existe-t-il un composant similaire à jsTree dans Ember pour rendre un grand nombre de nœuds d’arbre avec toutes les fonctionnalités telles que menu contextuel, glisser-déposer, recherche, plug-in unique, case à cocher, chargement paresseux?

    Réponses à vos questions.

    1. Est-ce que je vais dans la bonne direction? . Vous pouvez modulariser votre code mieux.
    2. Existe-t-il un autre moyen d’utiliser jsTree avec Ember? . Je ne sais pas ce que vous avez en tête, mais vous devez intégrer l’interface jQuery dans quelque chose.
    3. Y at-il une extension Ember comme jsTree? . Jetez un coup d’oeil à ember-cli-jstree ou ember-cli-tree .

    Réponse détaillée

    Nous utilisons Ember dans notre application de production où nous avons dû étendre certains plugins jQuery et décrire la manière dont nous l’avons fait.

    Il existe trois étapes dans le cycle de vie d’un plug-in, l’initialisation avec certaines options, les interactions utilisateur déclenchant des événements et les états de manipulation des gestionnaires d’événements. L’objective est de créer une couche d’abstraction sur ces étapes suivant les conventions Ember. L’abstraction ne doit pas rendre la documentation du plugin inutilisable.

     App.PluginComponent = Em.Component.extend({ /***** initialization *****/ op1: null, //default value op2: true, listOfAllOptions: ['op1', 'op2'], setupOptions: function() { //setup observers for options in `listOfAllOptions` }.on('init'), options: function() { //get keys from `listOfAllOptions` and values from current object //and translate them //to the key value pairs as used to initialize the plugin }.property(), /***** event handler setup *****/ pluginEvents: ['show', 'hide', 'change'], onShow: function() { //callback for `show` event }, setupEvents: function() { //get event names from `pluginEvents` //and setup callbacks //we use `'on' + Em.Ssortingng.capitalize(eventName)` //as a convention for callback names }.on('init'), /***** initialization *****/ onHide: function() { //change the data //so that users of this component can add observers //and computed properties on it } });