如何在 Ember 中使用 jsTree 插件

Posted 2023-02-19

【中文标题】如何在 Ember 中使用 jsTree 插件

【英文标题】：How to use jsTree plugin within Ember

【发布时间】：2014-08-09 14:47:27

【问题描述】：

我使用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:  
);

JSBINDemo

在我的组件中，对于在树上完成的每个操作，jsTree 都会触发与事件相关的事件。

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

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

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

我在这里反对 Ember 公约。

我的方向正确吗？

还有其他方法可以将 jsTree 与 Ember 一起使用吗？

或者在 Ember 中是否有类似 jsTree 的组件来渲染大量树节点，并具有上下文菜单、拖放、搜索、唯一插件、复选框、延迟加载、更新节点等所有功能？

【问题讨论】：

你是如何继续这个过程的？我现在在我的 Ember 代码中包含了 jsTree。尚未尝试尊重 Ember 的约定。

顺便说一句，调用self.$().jstree(); 对我不起作用，我不得不使用Ember.run.next(function() self.$().jstree(););。可能是因为我使用嵌套组件（每个节点都是一个组件）。

【参考方案1】：

回答您的问题。

我的方向正确吗？。您可以更好地模块化代码。 还有其他方法可以将 jsTree 与 Ember 一起使用吗？。我不知道你在想什么，但你必须将 jQuery 接口包装在一些东西中。 有没有像 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
    
);