Emberjs CLI jsTree addon плагины не работают

Question

У меня возникли проблемы с получением плагинов типов, работающих с аддоном jsTree для ember CLI (https://www.npmjs.com/package/ember-cli-jstree). Поэтому я скопировал контроллер и шаблон из фиктивного приложения под тесты из аддона jsTree в новое приложение ember. Даже это похоже на то, что плагины не работают. Однако все остальное в фиктивном приложении работает правильно. Есть ли что-то еще, что мне нужно сделать, чтобы активировать плагины? Я попробовал плагин checkbox и плагин типов, и ни один из них не работает.

Шаблон:

<div class="sample-tree"> 
    {{ember-jstree 
    actionReceiver=jstreeActionReceiver 
    selectedNodes=jstreeSelectedNodes 

    data=data 
    plugins=plugins 
    themes=themes 

    checkboxOptions=checkboxOptions 
    contextmenuOptions=contextmenuOptions 
    contextMenuReportClicked="contextMenuReportClicked" 
    stateOptions=stateOptions 
    typesOptions=typesOptions 

    eventDidBecomeReady="handleTreeDidBecomeReady" 

    actionGetNode="handleGetNode" 
    }} 
</div> 

<div class="info"> 
    <div class="status"> 
     <h2>Tree Status</h2> 
     <p {{bind-attr class=":tree-status treeReady:tree-ready:tree-not-ready"}}>Tree Ready? <strong>{{#if treeReady}}Yes{{else}}No{{/if}}</strong></p> 
     <p>Last Context Item Clicked: <strong>{{lastItemClicked}}</strong></p> 
    </div> 

    <div class="selected"> 
     <h2>Selected Items</h2> 
     {{#if sortedSelectedNodes}} 
      <ul> 
      {{#each node in sortedSelectedNodes}} 
       <li><strong>{{node.text}}</strong></li> 
      {{/each}} 
      </ul> 
     {{/if}} 
    </div> 

    <div class="actions ember-test-actions"> 
     <h2>Actions</h2> 
     <button {{action "getNode" "rn2"}} class="ember-test-getnode-button">Get "Opened node"</button> 
     <br><br> 
     <button {{action "redraw"}}>Redraw</button> 
     <br><br> 
     <button {{action "destroy"}} class="ember-test-destroy-button">Destroy</button> 
     <br><br> 
     <button {{action "addChildByText" "Opened node (has tooltip)"}}>Add child to "Opened node"</button> 
    </div> 

    <div class="buffer"> 
     <h2>Buffer Console</h2> 
     <pre class="ember-test-buffer">{{jsonifiedBuffer}}</pre> 
    </div> 

</div> 

Контроллер:

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    jstreeActionReceiver: null, 
    jstreeSelectedNodes: Ember.A(), 
    jstreeBuffer: null, 
    jsonifiedBuffer: '<No output>', 

    sortedSelectedNodes: Ember.computed.sort('jstreeSelectedNodes', function(a, b) { 
    if (a.text > b.text) { 
     return 1; 
    } else if (a.text < b.text) { 
     return -1; 
    } else { 
     return 0; 
    } 
    }), 

    data: [ 
    'Simple root node', 
    { 
     'text': 'Single child node (has tooltip)', 
     'type': 'single-child', 
     'children': [ 
     'one child' 
     ], 
     'a_attr': {'class': 'hint--top', 'data-hint': 'Use a_attr to add tooltips'} 
    }, 
    { 
     'id': 'rn2', 
     'text' : 'Opened node (has tooltip)', 
     'state' : { 
     'opened' : true, 
     'selected' : true 
     }, 
     'a_attr': {'class': 'hint--bottom', 'data-hint': 'This is a bottom mounted node tooltip'}, 
     'children' : [ 
     { 
      'text' : 'Child 1' 
     }, 
     'Child 2' 
     ] 
    } 
    ], 

    lastItemClicked: '', 
    treeReady: false, 

    plugins: "checkbox, wholerow, state, types, contextmenu", 
    themes: { 
    'name': 'default', 
    'responsive': true 
    }, 

    checkboxOptions: {"keep_selected_style" : false}, 

    stateOptions: { 
    'key': 'ember-cli-jstree-dummy' 
    }, 

    typesOptions: { 
    'single-child': { 
     'max_children': '1' 
    } 
    }, 

    contextmenuOptions: { 
    "show_at_node": false, 
    "items" : { 
     "reportClicked": { 
     "label": "Report Clicked", 
     "action": "contextMenuReportClicked" 
     } 
    } 
    }, 

    _jsonifyBufferWatcher: Ember.observer('jstreeBuffer', function() { 
    var b = this.get('jstreeBuffer'); 

    if (null !== b && b) { 
     this.set('jsonifiedBuffer', JSON.stringify(b)); 
    } else { 
     this.set('jsonifiedBuffer', '<No output>'); 
    } 
    }), 

    actions: { 

    redraw: function() { 
     this.get('jstreeActionReceiver').send('redraw'); 
    }, 

    destroy: function() { 
     this.get('jstreeActionReceiver').send('destroy'); 
    }, 

    getNode: function(nodeId) { 
     this.get('jstreeActionReceiver').send('getNode', nodeId); 
    }, 

    handleGetNode: function(node) { 
     if (node) { 
     this.set('jstreeBuffer', node); 
     } 
    }, 

    contextMenuReportClicked: function(node, tree) { 
     var self = this; 
     this.set('lastItemClicked', '"Report" item for node: <' + node.text + '> was clicked.'); 
    }, 

    addChildByText: function(nodeTextName) { 
     if (typeof nodeTextName !== 'string') { 
     return; 
     } 

     var data = this.get('data'); 
     data.forEach(function(node, index) { 
     if (typeof node === 'object' && node["text"] === nodeTextName) { 
      data[index].children.push('added child'); 
     } 
     }); 
     this.set(data); 
     this.send('redraw'); 
    }, 

    handleTreeDidBecomeReady: function() { 
     this.set('treeReady', true); 
    } 
    } 

}); 

Answer 1

Когда вы пытаетесь получить доступ к:

// app/templates/index.hbs 

{{ember-jstree 
    ... 
}} 

Ember будет пытаться найти его в локальной папке компонентов в качестве компонентов: уголек-jstree. Чтобы заставить его работать, вам просто нужно создать свой фиктивный компонент ember-jstree и импортировать компонент ember-cli-jstree:

// app/components/ember-jstree.js 

import Ember from 'ember'; 
import EmberJstree from 'ember-cli-jstree/components/ember-jstree'; 

export default EmberJstree;