mercredi 12 août 2015

Emberjs CLI jsTree addon plugins not working

I was having issues with getting the types plugin working with the jsTree addon for ember CLI (http://ift.tt/1IYEU8b). So I copied the controller and template from the dummy app under tests from the jsTree addon into a new ember app. Even this seems like the plugins are not working. Everything else on the dummy app is working correctly though. Is there anything else I need to do to get the plugins activated? I tried the checkbox plugin and the types plugin and neither of them work.

Template:

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

Controller:

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

});




Aucun commentaire:

Enregistrer un commentaire