Как использовать плагин jsTree в Ember

Я использовал jsTree плагин для рендеринга большого количества дерева node в моем продукте.

Теперь я нахожусь в процессе перехода к Ember, и мне нужно реализовать плагин jsTree в Ember.

Я написал компонент Ember для создания структуры папок с помощью jsTree.

Мой компонент:

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

JSBIN Демо-версия

В моем компоненте для каждого действия, выполняемого в дереве, jsTree запускает событие, соответствующее событию.

Я использовал для прослушивания событий и при необходимости делал необходимые действия.

В основном jsTree обновляет DOM и запускает событие.

Но в Ember мы не будем обновлять DOM, вместо этого нам нужно обновить базовую модель и двухстороннюю привязку данных DOM обновляется Ember.

Здесь я иду против Углубленных конвенций.

Я иду в правильном направлении?

Есть ли другой способ использования jsTree с Ember?

Или есть ли какой-либо jsTree-подобный компонент, доступный в Ember для отображения большого количества узлов дерева со всеми функциями, такими как контекстное меню, перетаскивание, поиск, уникальный плагин, флажок, ленивая загрузка, обновление узлов?

Ответ 1

Ответы на ваши вопросы.

Я иду в правильном направлении? Вы можете лучше модулировать код.
Есть ли другой способ использования jsTree с Ember?. Я не знаю, что вы имеете в виду, но вы должны каким-то образом обернуть интерфейс jQuery.
Есть ли расширение Ember, например jsTree?. Взгляните на ember-cli-jstree или ember-cli-tree.

Подробный ответ

Мы используем Ember в нашем производственном приложении, где нам нужно расширять некоторые плагины jQuery, и я опишу способ, которым мы это сделали.

Существует три этапа жизненного цикла плагина, инициализация с некоторыми параметрами, инициирование событий взаимодействия с пользователем и события манипуляции с обработчиком событий. Цель состоит в том, чтобы создать слой абстракции на этих этапах после соглашений Ember. Абстракция не должна сделать документацию плагина непригодной.

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

Ответ 2

Вы на правильном пути.

Смотрите этот скринкаст для аналогичной ситуации, когда плагин JQuery завернут в компонент Ember с привязкой данных и запуском событий.