如何在Ember中使用jsTree插件

Question

我使用jsTree插件在我的產品中渲染大量的樹節點。

現在我正在遷移到Ember，需要在Ember中實現jsTree插件。

我寫了一個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，而是需要更新底層MODEL，並且通過雙向數據綁定，DOM由Ember更新。

在這里，我反對Ember公約。

我正朝着正確的方向前進嗎？

還有其他方法可以將jsTree與Ember一起使用嗎？

或者Ember中是否有任何類似jsTree的組件可以渲染大量具有上下文菜單，拖放，搜索，唯一插件，復選框，延遲加載，更新節點等功能的樹節點？

Answer 1

你的問題的答案。

1. 我正朝着正確的方向前進嗎？ 。 您可以更好地模塊化您的代碼。
2. 還有其他方法可以將jsTree與Ember一起使用嗎？ 。 我不知道你有什么想法，但你必須包裝jQuery接口。
3. 有沒有像jsTree這樣的Ember擴展？ 。 看看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
    }
});