JSFiddle - React, Tailwind, and code Playground

by zhning

HTML

<script src="http://besideriver.com/RiverJS/1.0.8/river.min.js"></script>
<div scope="spec.scope">
    <p id="fa">{{ name }}</p>
    <div scope="spec.scope.sub">
        <p id="sa">{{ name }}</p>
        <p>{{ skill }}</p>
        <p id="fv">{{ favorit }}</p>
        <button class="btn" jclick="changeFavorit">Change favorit</button>
        <button class="changename" jclick="changeName">Change Name</button>
    </div>
    <button jclick="changeName">Change Name</button>
</div>

JavaScript

var foo = {
    changeName: function () {
        if (scope.name === "peter") {
            scope.name = "mariy";
        } else {
            scope.name = "peter";
        }
    },
    changeFavorit: function () {
        if (subscope.favorit === "apple") {
            subscope.favorit = "banana";
        } else {
            subscope.favorit = "apple";
        }
    },
    subchangeName: function () {
        if (subscope.name === "junior peter") {
            subscope.name = "little mariy";
        } else {
            subscope.name = "junior peter";
        }
    }
}

define("spec.scope", function (exports, require, module) {
    return function () {
        scope = this;
        scope.name = "peter";
        scope.skill = "I can write programe.";
        scope.changeName = foo.changeName;
    };
});

define("spec.scope.sub", function () {
    return function () {
        subscope = this;
        this.name = "junior peter";
        this.favorit = "apple";
        this.changeFavorit = foo.changeFavorit;
        this.changeName = foo.subchangeName;
    };
});