JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<h2>Users</h2>
<ul data-bind="template: {name: 'userli', foreach:users.users}"></ul>

<h2>Employees</h2>
<ul data-bind="template: {name: 'userli', foreach:users.employees}"></ul>

<h2>People</h2>
<ul data-bind="template: {name: 'userli', foreach:users.employees}"></ul>

<h2>Children</h2>
<ul data-bind="template: {name: 'userli', foreach:users.employees}"></ul>
        
 <script type="text/html" id="userli">
    <li><span data-bind="html: $data.firstName"></span> <span data-bind="html: $data.lastName"></span></li>
</script>

JavaScript

Function.prototype.inheritsFrom = function(parentClassOrObject){ 
    if(parentObject.constructor == Function){ 
        this.prototype = new parentClassOrObject();
        this.prototype.constructor = this;
        this.prototype.parent = parentClassOrObject.prototype;
    } 
    else { 
        this.prototype = parentClassOrObject;
        this.prototype.constructor = this;
        this.prototype.parent = parentClassOrObject;
    } 
    return this;
};
/*
var Person = function(firstName, lastName){
    this.firstName = ko.observable(firstName);
    this.lastName = lastName;
};

var Child = function(firstName, lastName){
    //this.parent.
};

Employee.inheritsFrom(Person);
*/
// -------------------------

var User = function(firstName, lastName){
    this.firstName = ko.observable(firstName);
    this.lastName = lastName;
};


var Employee = function(firstName, lastName){
    this.firstName(firstName);
    this.lastName = lastName; 
};
    
Employee.prototype = new User();

// ------------------------------------------

var userCollection = {
    users: ko.observableArray(),
    employees: ko.observableArray(),
    people: ko.observableArray(),
    children: ko.observableArray()
};

ko.applyBindings({users: userCollection});

var users = [
    {'first': 'John', 'last': 'Johnson'},
    {'first': 'Jane', 'last': 'Doe'},
    {'first': 'Bob', 'last': 'Smith'},
    {'first': 'Fred', 'last': 'Flintstone'},
    {'first': 'Barney', 'last': 'Rubble'}
];

var users = [];
var employees = [];
var people = [];
var children = [];

for (var i = 0; i < users.length; i++){
    employees.push(new Employee(users[i].first, users[i].last));
    users.push(new User(users[i].first, users[i].last));
    //people.push(new Person(users[i].first, users[i].last));
    //children.push(new Child(users[i].first, users[i].last));
};

userCollection.users(users);
userCollection.employees(employees);
userCollection.people(people);
userCollection.children(children);