valueAsCurrency

by housecor

HTML

<div id="test">
  <table>
    <thead>
      <tr>
          <td></td>
        <td>Week 1</td>
        <td>Week 2</td>
        <td>Week 3</td>
      </tr>
    </thead>
    <tbody> 
<tr>
    <td>subtotal</td>
    <td data-bind="textAsCurrency: week1Sum"></td>
    <td></td>
        <td></td>
        </tr>    
        <!-- ko foreach: revenueStreams -->
      <tr>
        <td>Name</td>
        <td><input data-bind="valueAsCurrency: week1Amount" /></td>
        <td><input data-bind="valueAsCurrency: week2Amount" /></td>
        <td><input data-bind="valueAsCurrency: week3Amount" /></td>
      </tr>
        <!-- /ko -->
    </tbody>
  </table>
      <p data-bind="textAsCurrency: $root.revenueStreams[0].week1Amount"></p>
      <p><button data-bind="click: changeModel">change model</button>
  </div>

JavaScript

ko.bindingHandlers.valueAsCurrency = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor(),
            formatted = ko.computed({
                read: function (key) {
                    return '$' + (+observable()).toFixed(2);
                },
                write: function (value) {
                    value = parseFloat(value.replace(/[^\.\d]/g, ""));
                    observable(isNaN(value) ? null : value); // Write to underlying storage 
                },
                disposeWhenNodeIsRemoved: element                
            });
        
        //apply the actual value binding with our new computed
        ko.applyBindingsToNode(element, { value: formatted });
    }        
};

ko.bindingHandlers.textAsCurrency = {
    init: function(element, valueAccessor) {
        var observable = valueAccessor(),
            formatted = ko.computed({
                read: function() {
                    return '$' + (+observable()).toFixed(2);
                },
                disposeWhenNodeIsRemoved: element                
            });
        
        //apply the actual value binding with our new computed
        ko.applyBindingsToNode(element, { text: formatted });
    }        
};

function revenueStream(w1, w2, w3) {
  var self = this;
  self.week1Amount = ko.observable(w1);
  self.week2Amount = ko.observable(w2);
  self.week3Amount = ko.observable(w3);
}

function revenueStreamCategory(revenueStreams) {
  var self = this;
  self.revenueStreams = revenueStreams; 
    
    
  self.week1Sum = ko.computed(function(){
    var sum = 0.0;
      
    ko.utils.arrayForEach(self.revenueStreams, function(item) {
            sum += +item.week1Amount();
    });
      
    return sum;
  });    
    
    self.changeModel= function(){
        //change one value to 20
        self.revenueStreams[0].week1Amount(20);
    }
}

    var rs = []
    rs.push(new revenueStream(10, 11, 12));
    rs.push(new revenueStream(13, 14,...