如何在Ember中使用jsTree插件
我已经使用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公约。
我正朝着正确的方向走吗？
有没有其他的方式来使用Ember的jsTree？
还是有没有像在Ember中可用的jsree像组件来渲染大量的所有function，如上下文菜单，拖放，search，独特的插件，checkbox，延迟加载，更新节点树节点？
您的问题的答案。
- 我正朝着正确的方向走吗？ 。 您可以更好地模块化您的代码。
- 有没有其他的方式来使用Ember的jsTree？ 。 我不知道你在想什么，但是你必须把jQuery接口包装进去。
- 有没有像jsTree的Ember扩展？ 。 看看ember-cli-jstree或者ember-cli-tree 。
详细的回应
我们在我们的生产应用程序中使用Ember，我们必须扩展一些jQuery插件，并概述我们做的方式。
在一个插件的生命周期中有三个阶段，初始化有一些选项，用户交互触发事件和事件处理器操作状态。 目标是在遵循Ember约定的这些阶段上创build一个抽象层。 抽象不能使插件文档不可用。
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 } });
你在正确的轨道上。
看到这个屏幕截图 ，类似的情况下，一个JQuery插件包装在一个Ember组件中，并带有数据绑定和事件触发。
