如何在Ember中使用jsTree插件

How to use jsTree plugin within Ember

本文关键字：jsTree 插件 Ember      更新时间：2023-09-26

我在我的产品中使用了jsTree插件渲染了大量的树节点。

现在我正在移动到Ember的过程中，需要在Ember中实现jsTree插件。

我写了一个Ember组件来使用jtree渲染我的文件夹结构。

我组件:

<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演示

在我的组件中，对于在树上执行的每个操作，jtree都会触发一个与该事件相关的事件。

我过去常常听事件，并在需要时采取必要的行动。

基本上jtree更新DOM并触发事件。

但是在Ember中，我们不会更新DOM，而是需要更新底层的MODEL，并且通过双向数据绑定，DOM由Ember更新。

我在这里违背了烬公约。

我走的方向对吗?

还有其他方法使用jtree与Ember吗?

或者在Ember中是否有任何类似jtree的组件可以渲染大量的树节点，并具有所有功能，如上下文菜单，拖动&Drop, search, unique plugin, checkbox, lazy loading, updating nodes?

回答您的问题。

  1. 我走对方向了吗?你可以更好地模块化代码。
  2. 还有其他方法可以使用jsTree与Ember吗?。我不知道你在想什么，但你必须把jQuery接口包装起来。
  3. 是否有任何烬扩展像jstreet ?。查看ember-cli- jtree或ember-cli-tree。
<

详细反应/strong>

我们在我们的生产应用程序中使用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
    }
});
相关文章：