JSFiddle - React, Tailwind, and code Playground

by rhodee

JavaScript

$(document).ready(function () {
  ko.applyBindings(new UsersViewModel(), $('#mainContainer')); 
});

// Class to represent a row in the seat reservations grid
function UserCreator(name, email) {
  var self = this;
  self.name = name;
  self.email = ko.observable(email);
  self.formattedName = ko.computed(function() {
      var email = self.email();
      return self.name + " " + email;        
  });    
}

// Overall viewmodel for this screen, along with initial state
function UsersViewModel() {
  var self = this;
  
  // Editable data
   self.users = ko.observableArray([
        new UserCreator("Steve", "[email protected]"),
        new UserCreator("Denis", "[email protected]"),
        new UserCreator("Putty", "[email protected]")
   ]);

   // Computed data
    self.totalUsers = ko.computed(function() {
       var total = 0;
       for (var i = 0; i < self.users().length; i+=1)
           total += self.users()[i];
       return total;
    });    
    
    // Grab data from server

    // Operations
    self.addUser = function() {
        self.users.push(new UserCreator("", "[email protected]"));
    }
    self.removeUser = function(user) { self.users.remove(user) }
}