JSFiddle - React, Tailwind, and code Playground

by psoares

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<div id="tree">

</div>

JavaScript

require([
     "dojo/_base/window", "dojo/store/Memory",
     "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/domReady!"
 ], function(win, Memory, ObjectStoreModel, Tree){

     // Create test store, adding the getChildren() method required by ObjectStoreModel
     debugger;
     var myStore = new Memory({
         data: [
            { id: 1, name: 'Menu', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree', root: true, directory: true },
            { id: 2, name: 'Folder1', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree', parent: 1, directory: false},
            { id: 3, name: 'Leaf1', url: 'http://dojotoolkit.org/api/1.6/dijit.Tree.model', parent: 2 },
            { id: 4, name: 'Leaf2', url: 'http://dojotoolkit.org/api/1.6/dijit.tree.ForestStoreModel', parent: 2 }
            ],
         getChildren: function(object){
           return this.query({parent: object.id});
         }
     });

     // Create the model
     var myModel = new ObjectStoreModel({
         store: myStore,
         query: {root: true}
     });

     // Create the Tree, specifying an onClick method
     (new Tree({
         model: myModel,
 getIconClass:function(item, opened){
               return myStore.getValue(item, 'directory') ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf";
            },
         onClick: function(item){
             // Get the URL from the item, and navigate to it
             // location.href = item.url; 
             //parent.getElementById('central').src = item.url;
             parent.central.location.href = item.url;
         }
     })).placeAt("tree").startup();
});