JSFiddle - React, Tailwind, and code Playground

by psoares

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css">
<input id="foo"></input>
<button id="btn1"></button>
<div id="output"></div>

JavaScript

require(["dojo/_base/declare", "dijit/form/Button", "dojo/html", "dijit/_WidgetBase", "dijit/_TemplatedMixin"],

function (declare, Button, html, _WidgetBase, _TemplatedMixin) {

    var Widget = declare([_WidgetBase, _TemplatedMixin], {
        templateString: "<input type='text' data-dojo-attach-point='fooNode' data-dojo-attach-event='onchange:onChange'></input>",

        _setValueAttr : { node : "fooNode", type: "attribute", attribute: "value"  },
        
        value: "foo",

        postCreate: function () {
            this.inherited(arguments);
            this.watch("value", function (attr, oldVal, newVal) {
                html.set("output", this.get("value"));
            });
        },
        
        onChange : function() {
             console.debug(arguments);   
        }
    }),


        w = new Widget({
            value: "foo"
        }, "foo"),
        btn1 = new Button({
            label: "OK"
        }, "btn1");
     w.startup();
    
    btn1.on("click", function () {
        w.set("value", "bar " + new Date());
    });

   
    btn1.startup()


});