JSFiddle - React, Tailwind, and code Playground

by enyojs

JavaScript

enyo.kind({
    name: "MySample",
    foo: new enyo.Model({foo:"bar", fun:"sun"}),
    components: [
        {kind:"enyo.Signals", onMyCustomSignal:"signaled"},
       {kind: "onyx.Toolbar", content: "Your sample here", components: [
            {kind: "onyx.Button", ontap:"tapped", components: [
                {kind: "enyo.Image", src:"http://placehold.it/16x16"},
                {content: "Button"}
            ]},
            {kind: "onyx.InputDecorator", onAwesomeHappened:"awesome", components: [
                {kind: "my.Input", name:"myInput"}
            ]}
        ]}
    ],
    observers: {
        observeFoo: ["foo.fun"]
    },
    observeFoo: function(val) {
        alert(val);
    },
    awesome: function(inSender, inEvent) {
        alert("awesome: " + inEvent.awesome);
    },
    tapped: function() {
        enyo.Signals.send("onMyCustomSignal", {awesome:true});
    }
});

enyo.kind({
    name:"my.Input",
    kind:"onyx.Input",
    events: {
        onAwesomeHappened:""
    },
    input: function(inSender, inEvent) {
        this.inherited(arguments);
        if (this.getValue() == "yoryx") {
            this.doAwesomeHappened({awesome:true});
        }
    }
});

new MySample({fit:true}).write();