JSFiddle - React, Tailwind, and code Playground

by andrew rowe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<body class="claro">
    <a href='#' onclick='console.log("hello")'>ABS</a>
</body>

JavaScript

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

    // Create test store, adding getChildren() method needed by ObjectStoreModel
    var store = new Memory({
        data: [
            { id: 0, label: "root"},
               {id: 1, label: "<i>hello</i>", parent: 0},
            {id: 2, label: "<b>world</b> <a href='http://abs.gov.au'>ABS</a>", parent: 0},
        ],
        getChildren: function(object){
            return this.query({parent: object.id});
        }
    });

    // Create the model
    var model = new ObjectStoreModel({
        store: store,
        query: {id: 0},
        labelAttr: "label"
    });

    // Custom TreeNode class (based on dijit.TreeNode) that allows rich text labels
    var MyTreeNode = declare(Tree._TreeNode, {
        _setLabelAttr: {node: "labelNode", type: "innerHTML"}
    });

    // Create the Tree.
    var tree = new Tree({
        model: model,
        _createTreeNode: function(args){
           return new MyTreeNode(args);
        }
    });
    tree.placeAt(win.body());
    tree.startup();
});