Javascript 如何在Ember中使用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: {} 
});

树数据
App.testreecomponent=Ember.Component.extend({
didInsertElement:函数（）{
var self=这个；
self.$（）.jstree({
“插件”：[“上下文菜单”，“dnd”]，
“核心”：{
“数据”：[
“简单根节点”，
{ 
“文本”：“根节点2”，
“州”：{
“开放”：是的，
“选定”：true
},
“儿童”：[
{'text'：'Child 1'}，
“儿童2”
]
} 
], 
“检查回调”：true
}
})
.on（'rename_node.jstree'，函数（e，数据）{
警报（“重命名”）；
})
.on（'delete_node.jstree'，函数（e，数据）{
警报（“删除”）；
});
}, 
动作：{}
});

杰斯宾

在我的组件中，对于在树上执行的每个操作，jsTree都会触发相应于事件的事件

我过去常常倾听这些事件，并在必要时采取必要的行动

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

但是在Ember中，我们不会更新DOM，而是需要更新底层模型，通过双向数据绑定，DOM由Ember更新

在这里，我反对余烬公约

我走的方向对吗

有没有其他方法可以将jsTree与Ember一起使用

---

或者在Ember中是否有任何类似jsTree的组件可用于呈现大量具有上下文菜单、拖放、搜索、唯一插件、复选框、延迟加载、更新节点等所有功能的树节点？

回答您的问题。

我走的方向对吗？。您可以更好地模块化代码

有没有其他方法可以将jsTree与Ember一起使用？。我不知道您在想什么，但您必须将jQuery接口包装成某种东西

有没有像jsTree这样的余烬扩展？。看看或者

详细回复

我们在我们的生产应用程序中使用了Ember，在那里我们必须扩展一些jQuery插件，我将概述我们的方法

插件的生命周期分为三个阶段：带有一些选项的初始化、触发事件的用户交互和事件处理程序操作状态。目标是按照余烬约定在这些阶段上创建一个抽象层。抽象不能使插件文档无法使用

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

---

你是怎么继续的？目前，我正在我的余烬代码中包含jsTree。还没有尝试尊重余烬的约定。顺便说一句，调用

self.$（）.jstree（）对我不起作用，我必须使用
Ember.run.next（函数（）{self.$（）.jstree（）；}）。可能是因为我使用嵌套组件（每个节点都是一个组件）。