JSFiddle - React, Tailwind, and code Playground

by jwinstonaspen

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>

<br/>
<ul>
    <li data-bind="foreach:  Parts">
        <input data-bind="value: Vol" />
<br/>
    </li>
</ul>

<br/>
<br/>
<span data-bind="text: fullVol "></span>

JavaScript

function Part (data) {
    
   var self = this;
    self.Vol= ko.observable(data.Vol);
    
}


function AppViewModel() {
   var self = this;
    
    
    self.Parts = ko.observableArray([new Part({"Vol": 1}), new Part({"Vol":2}), new Part({"Vol":3})]);
    self.fullVol = ko.computed(function() {
        var total = 0;
       $.each(self.Parts(), function() { total += (this.Vol() ) })
        return total;
    });
}


ko.applyBindings(new AppViewModel());