JSFiddle - React, Tailwind, and code Playground

by Francesco Frustaci

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<table>
<tbody data-bind="foreach: Users">
        <tr>
            <td></td>
            <td data-bind="text: LoginName"></td>
            <td data-bind="text: SpaceName"></td>
            <td data-bind="text: Email"></td>
            <td> <input type="button" value="Edit" data-bind="click:$parent.EditUser"></td>
        </tr>
  </tbody>
</table>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <h5 > Edit</h5>
      <input type="text" data-bind="textInput:EditLoginName" >
      <input type="text" data-bind="textInput:EditEamil" >
      <input type="button" value="update" data-bind="click:UpdateUser">
    </div>
  </div>
</div>

CSS

table tbody tr>td{
  padding:20px;
}

JavaScript

var data = [{Id:1,LoginName:"Dave" ,SpaceName : "SpaceName1" , Email:"[email protected]" },{Id:2,LoginName:"Mike" ,SpaceName : "SpaceName2" , Email:"[email protected]" },{Id:3,LoginName:"Kevin" ,SpaceName : "SpaceName3" , Email:"[email protected]" }]

var AppViewModel = function (){
  var self = this;
  self.Users = ko.observableArray($.map(data, function (user) {
    return new UserViewModel(user);
  }));
  self.EditLoginName = ko.observable();
  self.EditEamil = ko.observable();
  self.SelectedUserId = ko.observable();
  self.EditUser = function(user){
  	$(".bs-example-modal-sm").modal('show')
  	 self.EditLoginName(user.LoginName())
     self.EditEamil(user.Email());
     self.SelectedUserId(user.Id())
  }
  
  self.UpdateUser = function(){
  	alert(self.EditLoginName() + " Id: "+self.SelectedUserId()  + " is ready to get updated");
    $(".bs-example-modal-sm").modal('hide')
  }
}

var UserViewModel = function (data){
  var self = this;
  self.Id = ko.observable(data.Id)
  self.LoginName = ko.observable(data.LoginName)
  self.SpaceName = ko.observable(data.SpaceName)
  self.Email = ko.observable(data.Email)
}
ko.applyBindings( new AppViewModel());