JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<h1 data-bind="text: myUser.getFullName"></h1>

<script type="text/html" id="userLi">
  <li data-bind="html: $data.getFullName"></li>
</script>

JavaScript

var User = function(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
    this.friends = [];

    this.getFullName = function(){
        return this.firstName+' '+this.lastName;
    };
};

var viewModel = function(){
    this.myUser = ko.observable();
    
    this.addFriend = function(friend){
        console.log('usr', this.myUser, this.myUser());
        this.myUser().friends.push(friend);
    };
    
    this.init = function(){
      this.myUser(new User('test', 'user'));
    };
};

var vm = new viewModel();
vm.init();

ko.applyBindings(vm);

var testUsers = [
    {firstName: 'John', lastName: 'Lennon'},
    {firstName: 'Paul', lastName: 'McCartney'},
    {firstName: 'Ringo', lastName: 'Starr'},
    {firstName: 'George', lastName: 'Harrison'}
];

for(p in testUsers){
    // vm.addFriend(new User(p.firstName, p.lastName));
}