javascript - data - Cómo usar el plugin jsTree dentro de Ember

populate jstree

Question

He usado el plugin jsTree para representar una gran cantidad de nodos de árbol en mi producto.

Ahora estoy en el proceso de moverme a Ember, y necesito implementar el plugin jsTree dentro de Ember.

Escribí un componente Ember para renderizar la estructura de mi carpeta usando jsTree.

Mi Componente:

<script type="text/x-handlebars" data-template-name="components/temp-tree">
    <div id="treediv">Tree Data</div>
</script>

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

Demo JSBIN

En mi componente para cada acción realizada en el árbol, jsTree desencadena un evento respectivo al evento.

Solía ​​escuchar los eventos y hacer las acciones necesarias si fuera necesario.

Básicamente, jsTree actualiza el DOM y desencadena el evento.

Pero en Ember no actualizaremos el DOM, en su lugar tenemos que actualizar el MODELO subyacente y, mediante el enlace de datos bidireccional, el DOM se actualiza por Ember.

Aquí voy en contra de las Convenciones Ember.

¿Voy en la dirección correcta?

¿Hay alguna otra forma de usar jsTree con Ember?

¿O hay algún componente similar a jsTree disponible en Ember para renderizar una gran cantidad de nodos de árbol con todas las características como menú contextual, arrastrar y soltar, búsqueda, complemento único, casilla de verificación, carga diferida, actualización de nodos?

Answer 1

Respuestas a tus preguntas

1. ¿Voy en la dirección correcta? . Puedes modularizar tu código mejor.
2. ¿Hay alguna otra forma de usar jsTree con Ember? . No sé lo que tienes en mente, pero tienes que ajustar la interfaz jQuery en algo.
3. ¿Hay alguna extensión Ember como jsTree? . Eche un vistazo a ember-cli-jstree o ember-cli-tree .

Respuesta detallada

Usamos Ember en nuestra aplicación de producción donde tuvimos que extender algunos plugins de jQuery y esbozaré la forma en que lo hicimos.

Hay tres etapas en el ciclo de vida de un complemento, la inicialización con algunas opciones, las interacciones del usuario que desencadenan eventos y los estados de manipulación del controlador de eventos. El objetivo es crear una capa de abstracción sobre estas etapas siguiendo las convenciones de Ember. La abstracción no debe hacer inutilizable la documentación del complemento.

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