JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <script id="read" type="text/html">
        <div class="form-control" data-bind="text: text"></div>
    </script>
    <script id="edit" type="text/html">
        <select class="form-control" data-bind="options: roles, optionsText: 'name', value: role, optionsCaption: 'Choose...', valueAllowUnset: true"></select>
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    <script>
        var Person = (function () {

            function Person() {

                if (false) {
                    //either this
                    this.roles = ko.observableArray([{ id: 1, name: "ali" }]);
                    this.role = ko.observable(this.roles()[0]);
                } else {
                    //or that
                    this.role = ko.observable({ id: 1, name: "ali" });
                    this.roles = ko.observableArray([this.role()]);
                }


                this.text = ko.pureComputed(function () {
                    if (this.role())
                        return this.role()["name"];

                    return "Undefined";
                }, this);

                this.view = ko.observable("read");
                this.changeView = function () {
                    if (this.view() == "read")
                        this.view("edit")
                    else
                        this.view("read");
                };

            }

            return Person;
        }());
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            var model = new Person();
            ko.applyBindings(model, document.documentElement);

            window.setTimeout(function () {
                var lazilyLoadedRoles = [
                        { id: 1, name: "ali" },
                        { id: 2, name: "reza" }
                    ],
                    currentRole = model.role();

                //make sure...