JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<input type="text" data-bind="textInput: department.test" />
<p data-bind="text: department.test"></p>
<ul data-bind="foreach: department.list()">
    <li data-bind="text: $root.department.getDemo($data)">  </li>
</ul>

JavaScript

function UserViewModel() {
    var self = this;

    self.sayHi = function () {
        alert("hi!");
    };
}

function DepartmentViewModel() {
    var self = this;

    self.list = ko.observableArray(['Clients', 'Marketing', 'Economics']);
    self.test = ko.observable("aaaa");
    self.demo = 'demo';
    self.getDemo = function () {
        return "aaa";
    }
}

var MasterModel = function () {
    this.user = new UserViewModel();
    this.department = new DepartmentViewModel();
}


var mm = new MasterModel();
ko.applyBindings(mm);

mm.user.sayHi();