ember-cli-jstree

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Ember-cli-jstree by ritesh83</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen"> <link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen"> </head> <body> <section class="page-header"> <h1 class="project-name">Ember-cli-jstree</h1> <h2 class="project-tagline">ember-cli addon for jstree</h2> <a href="https://github.com/ritesh83/ember-cli-jstree" class="btn">View on GitHub</a> <a href="https://github.com/ritesh83/ember-cli-jstree/zipball/master" class="btn">Download .zip</a> <a href="https://github.com/ritesh83/ember-cli-jstree/tarball/master" class="btn">Download .tar.gz</a> </section> <section class="main-content"> <h1> <a id="ember-cli-jstree" class="anchor" href="#ember-cli-jstree" aria-hidden="true"></a>ember-cli-jstree</h1> <a href="https://travis-ci.org/yectep/ember-cli-jstree"><img src="https://travis-ci.org/yectep/ember-cli-jstree.svg?branch=master" alt="Travis-CI status"></a> <a href="http://emberobserver.com/addons/ember-cli-jstree"><img src="http://emberobserver.com/badges/ember-cli-jstree.svg" alt="Ember Observer Score"></a> Brings <a href="http://www.jstree.com/">jsTree</a> functionality into your Ember app. <blockquote> Version 0.1.0 of this addon or greater has support for Ember-CLI 1.13 and has prototype extensions disabled. </blockquote> <h2> <a id="installation" class="anchor" href="#installation" aria-hidden="true"></a>Installation</h2> Ember CLI addons can be installed with <code>ember install</code> <pre><code>ember install ember-cli-jstree </code></pre> <h2> <a id="usage" class="anchor" href="#usage" aria-hidden="true"></a>Usage</h2> Out of the box, the bare minimum you need on the template is <code>data</code>. Run supported actions on the tree by registering it to your controller with the <code>actionReceiver</code> property. <div class="highlight highlight-text-html-handlebars"><pre><div class="sample-tree"> {{ember-jstree actionReceiver=jstreeActionReceiver selectedNodes=jstreeSelectedNodes data=data plugins=plugins themes=themes checkboxOptions=checkboxOptions contextmenuOptions=contextmenuOptions stateOptions=stateOptions typesOptions=typesOptions searchOptions=searchOptions searchTerm=searchTerm contextMenuReportClicked="contextMenuReportClicked" eventDidBecomeReady="handleTreeDidBecomeReady" }} </div></pre></div> <h3> <a id="adding-classes" class="anchor" href="#adding-classes" aria-hidden="true"></a>Adding classes</h3> As per the <a href="https://www.jstree.com/docs/json/">jsTree JSON docs</a>, you can add custom classes to both the <code><li></code> and <code><a></code> tags of each individual node. These are passed on to jQuery's <code>attr</code> function. For example, to add <a href="http://kushagragour.in/lab/hint/">hint.css</a> tooltips, use the following in your JSON data hash. <div class="highlight highlight-source-js"><pre>{ 'id': 'node15', 'text': 'Node title', 'state': { 'selected': true }, 'a_attr': { 'class': 'hint--bottom', 'data-hint': 'Some hint goes here' } }</pre></div> This will get rendered in HTML as <div class="highlight highlight-text-html-basic"><pre><a class="jstree-anchor jstree-clicked hint--bottom" href="#" tabindex="-1" data-hint="Some hint goes here" id="node15_anchor"><i class="jstree-icon jstree-themeicon" role="presentation"></i>Node title</a></pre></div> <h2> <a id="event-handling" class="anchor" href="#event-handling" aria-hidden="true"></a>Event Handling</h2> The addon listens for events from jstree and sends them back to you using actions bound to the Handlebars template. Simply set the property to the string name of the action in your controller. <div class="highlight highlight-text-html-handlebars"><pre>{{ember-jstree [...] eventDidChange="handleJstreeEventDidChange" treeObject=jstreeObject }}</pre></div> <h3> <a id="supported-events" class="anchor" href="#supported-events" aria-hidden="true"></a>Supported events</h3> The following events have basic support included. More are on the way. <table> <thead> <tr> <th>jsTree Event</th> <th>Ember Action</th> </tr> </thead> <tbody> <tr> <td>after_open.jstree</td> <td>eventDidOpen</td> </tr> <tr> <td>after_close.jstree</td> <td>eventDidClose</td> </tr> <tr> <td>changed.jstree</td> <td>eventDidChange</td> </tr> <tr> <td>dehover_node.jstree</td> <td>eventDidDehoverNode</td> </tr> <tr> <td>deselect_node.jstree</td> <td>eventDidDeselectNode</td> </tr> <tr> <td>hover_node.jstree</td> <td>eventDidHoverNode</td> </tr> <tr> <td>init.jstree</td> <td>eventDidInit</td> </tr> <tr> <td>ready.jstree</td> <td>eventDidBecomeReady</td> </tr> <tr> <td>redraw.jstree</td> <td>eventDidRedraw</td> </tr> <tr> <td>show_node.jstree</td> <td>eventDidShowNode</td> </tr> <tr> <td>select_node.jstree</td> <td>eventDidSelectNode</td> </tr> <tr> <td>(destroyed - no event)</td> <td>eventDidDestroy</td> </tr> <tr> <td>move_node.jstree</td> <td>eventDidMoveNode</td> </tr> </tbody> </table> Note: In the meantime, you can add event listeners yourself by calling them on a mapped <code>treeObject</code> property. <div class="highlight highlight-source-js"><pre>_handleOpenNode: function() { var treeObject = this.get('jstreeObject'); treeObject.on('open_node.jstree', function(e, data) { console.info('A node was opened.'); console.log(data); }.bind(this)); }</pre></div> <h3> <a id="selected-nodes" class="anchor" href="#selected-nodes" aria-hidden="true"></a>Selected nodes</h3> Selected nodes are always available through the <code>selectedNodes</code> property <h2> <a id="plugins" class="anchor" href="#plugins" aria-hidden="true"></a>Plugins</h2> Plugins for your tree should be specified by a <code>plugins</code> string property. Multiple plugins should be separated with commas. <div class="highlight highlight-text-html-handlebars"><pre>{{ember-jstree data=data plugins=plugins }}</pre></div> The following <a href="http://www.jstree.com/plugins/">plugins</a> are currently supported. More on the way! <ul> <li>Checkbox</li> <li>Contextmenu</li> <li>Search</li> <li>State</li> <li>Types</li> <li>Wholerow</li> <li>Drag and Drop</li> </ul> <h3> <a id="configuring-plugins" class="anchor" href="#configuring-plugins" aria-hidden="true"></a>Configuring plugins</h3> Send a hash containing the jsTree options through to the addon through the <code><plugin name>Options</code> key. In your controller: <div class="highlight highlight-source-js"><pre>jstreeStateOptionHash: { 'key': 'ember-cli-jstree-dummy' }, plugins: 'state'</pre></div> In Handlebars: <div class="highlight highlight-text-html-handlebars"><pre>{{ember-jstree [...] plugins=plugins stateOptions=jstreeStateOptionHash }}</pre></div> <h3> <a id="configuring-tree-refresh" class="anchor" href="#configuring-tree-refresh" aria-hidden="true"></a>Configuring tree refresh</h3> Send in the following <a href="https://www.jstree.com/api/#/?f=refresh()">properties</a> to control how the tree is refreshed when you change the data <ul> <li>skipLoading</li> <li>forgetState</li> </ul> Both default to false if nothing is passed in <h2> <a id="sending-actions-to-jstree" class="anchor" href="#sending-actions-to-jstree" aria-hidden="true"></a>Sending actions to jsTree</h2> The addon component will try to register an <code>actionReceiver</code> (see view helper example) to a property in your controller if you define it. You can then send actions through that bound property: <div class="highlight highlight-source-js"><pre>this.get('jstreeActionReceiver').send('redraw');</pre></div> Note: Action names in Ember are camelized (e.g.: <code>get_node()</code> in jsTree is mapped to <code>getNode()</code> in Ember). If the corresponding jsTree method has a return value, the addon will send an action with the name corresponding to supported actions in the table below. Because the addon actually calls these jsTree events, if any events occur because of an action, they will be sent as actions (see Event Handling above). <h3> <a id="supported-actions" class="anchor" href="#supported-actions" aria-hidden="true"></a>Supported actions</h3> <table> <thead> <tr> <th>jsTree Action</th> <th>Ember Action</th> <th>Return Action</th> </tr> </thead> <tbody> <tr> <td>copy_node</td> <td>copyNode</td> <td></td> </tr> <tr> <td>close_all</td> <td>closeAll</td> <td></td> </tr> <tr> <td>close_node</td> <td>closeNode</td> <td></td> </tr> <tr> <td>create_node</td> <td>createNode</td> <td>actionCreateNode</td> </tr> <tr> <td>delete_node</td> <td>deleteNode</td> <td>actionDeleteNode</td> </tr> <tr> <td>deselect_all</td> <td>deselectAll</td> <td></td> </tr> <tr> <td>deselect_node</td> <td>deselectNode</td> <td></td> </tr> <tr> <td>destroy</td> <td>destroy</td> <td></td> </tr> <tr> <td>get_children_dom</td> <td>getChildrenDom</td> <td>actionGetChildrenDom</td> </tr> <tr> <td>get_container</td> <td>getContainer</td> <td>actionGetContainer</td> </tr> <tr> <td>get_node</td> <td>getNode</td> <td>actionGetNode</td> </tr> <tr> <td>get_parent</td> <td>getParent</td> <td>actionGetParent</td> </tr> <tr> <td>get_path</td> <td>getPath</td> <td>actionGetPath</td> </tr> <tr> <td>get_text</td> <td>getText</td> <td>actionGetText</td> </tr> <tr> <td>last_error</td> <td>lastError</td> <td>actionLastError</td> </tr> <tr> <td>load_all</td> <td>loadAll</td> <td>actionLoadAll</td> </tr> <tr> <td>load_node</td> <td>loadNode</td> <td>actionLoadNode</td> </tr> <tr> <td>move_node</td> <td>moveNode</td> <td></td> </tr> <tr> <td>open_all</td> <td>openAll</td> <td></td> </tr> <tr> <td>open_node</td> <td>openNode</td> <td></td> </tr> <tr> <td>redraw</td> <td>redraw</td> <td></td> </tr> <tr> <td>rename_node</td> <td>renameNode</td> <td>actionRenameNode</td> </tr> <tr> <td>select_all</td> <td>selectAll</td> <td></td> </tr> <tr> <td>select_node</td> <td>selectNode</td> <td></td> </tr> <tr> <td>toggle_node</td> <td>toggleNode</td> <td></td> </tr> </tbody> </table> <h3> <a id="receiving-return-values" class="anchor" href="#receiving-return-values" aria-hidden="true"></a>Receiving return values</h3> In your Handlebars component, map the return action (as above, most of which follow the pattern <code>action<action name></code>): <div class="highlight highlight-text-html-handlebars"><pre>{{ember-jstree [...] actionGetNode="handleJstreeGetNode" }}</pre></div> Any params that jsTree returns will be given in the order specified by its API. <div class="highlight highlight-source-js"><pre>actionGetNode: function (node) { this.set('someValue', node); }</pre></div> <h2> <a id="demo" class="anchor" href="#demo" aria-hidden="true"></a>Demo</h2> Both dynamic (AJAX loaded) and static examples are in the dummy demo. <ul> <li>Clone this repo: <code>git clone</code> </li> <li>Install packages: <code>npm install</code> then <code>bower install</code> </li> <li>Run <code>ember serve</code> </li> <li>Visit the sample app at http://localhost:4200.</li> </ul> <footer class="site-footer"> <a href="https://github.com/ritesh83/ember-cli-jstree">Ember-cli-jstree</a> is maintained by <a href="https://github.com/ritesh83">ritesh83</a>. This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>. </footer> </section> </body> </html>