ko-upadating view

How to update a view when variable is changed in the model?

by mckennatim

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<table>
    <thead>
        <tr>
            <th>Mon  1 </th>
            <th>Mon  2 </th>
            <th>Mon  3 </th>
            <th>Total </th>
        </tr>
    </thead>
    <tbody data-bind='foreach:List'>
        <tr>
            <!-- ko foreach:Entries-->
            <td>
                <input size="3" type="text" data-bind="value:Hours, valueUpdate:'afterkeydown'"/>
            </td>
            <!-- /ko -->
            <td>
                <span data-bind="text:Total"></span> 
            </td>
        </tr>
    </tbody>
</table>  
<button type="button" value="click" data-bind="click: show">show </button>
<h4>updated by click</h4>
<span data-bind="text: jsonList"></span>
<h4>updated by computed observable</h4>
<span style="color:green" data-bind="text:jsonList2"></span>
</div>

JavaScript

var data = {
    "Lines": [
        {"Entries": [{"Hours": 5.5},{"Hours": 2.50},{"Hours": 3.75}]}, 
        {"Entries": [{"Hours": 5.1},{"Hours": 2.00},{"Hours": 4.75}]},
        {"Entries": [{"Hours": 1.2},{"Hours": 3.00},{"Hours": 2.12}]}
    ]
}


function ViewModel() {
    var self = this
    self.List = ko.observableArray([])
    self.LoadData = function (data) {                      
        self.List(ko.mapping.fromJS(data.Lines)())
    }
    self.applyTotals = function(){
        ko.utils.arrayForEach(self.List(), function(vm){
            vm.Total = ko.computed(function(){
                var s = 0;
                ko.utils.arrayForEach(this.Entries(), function(entry){
                    var p = parseFloat(entry.Hours(), 10);
                    if (!isNaN(p)) {
                        s += p;
                    }
                });
                return s;
            }, vm);
        });
    }
    self.LoadData(data);   
    self.applyTotals();
    self.jsonList=ko.observable(ko.toJSON(self.List()));
    //console.log(ko.toJSON(self.List()));    
    self.show = function(){//the button click function
        self.jsonList(ko.toJSON(self.List()));
    }
    self.jsonList2 = ko.computed(function(){
        //var newval = self.jsonList()
        var newval = ko.toJSON(self.List())
        return newval;
    });
}


ko.applyBindings(new ViewModel(), document.getElementById('ko'))