JSFiddle - React, Tailwind, and code Playground

by gutek

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<table> 
   <thead> 
       <th>Name</th> 
       <th>Amount</th> 
   </thead> 
   <tbody data-bind='foreach: rows'> 
       <tr> 
           <td> 
               <input data-bind='value: row.name' /> 
            </td> 
            <td> 
                <input data-bind='value: row.amount' /> 
            </td> 
            <td> 
                <a href="#" data-bind="click: $parent.removeRow">Remove</a> 
            </td> 
        </tr> 
    </tbody> 
</table> 
 
<p data-bind='text: names'></p> 
<p data-bind='text: sum'></p>

JavaScript

// data model 
var ViewModel = function() { 
    var self = this;    
     
    // observable array of observables 
    self.rows = ko.observableArray([ 
        {     
            row: { 
                name: ko.observable('Tytus'),
                 amount: ko.observable(150)
             } 
         }, 
         {     
             row: { 
                 name: ko.observable('Romek'),
                 amount: ko.observable(90)
             } 
         }, 
         {     
             row: { 
                 name: ko.observable('Atomek'),
                 amount: ko.observable(65)
             } 
         } 
     ]); 
    
     // computed sum 
self.sum = ko.computed(function() { 
    var result = 0;
    ko.utils.arrayForEach(self.rows(), function(item) { 
        result += parseInt(item.row.amount()); 
    }); 
         
    return 'Suma: ' + result;
}, self);
    
    
 // computed names 
  self.names = ko.computed(function() { 
      var result = 'Imiona: ';
      ko.utils.arrayForEach(self.rows(), function(item) { 
          result = result + ' ' + item.row.name();
      }); 
           
      return result; 
  }, self);
    
     self.removeRow = function() { 
      self.rows.remove(this); 
  }
 };

ko.applyBindings(new ViewModel());