javascript - Knockout.js - Sum table, add row and fill the table with AJAX -

im using table add materials , using knockoutjs-3.4.0.js add row , sum it. problem when try edit code want populate table ajax request. problem don't know how fill table ajax response.

if use code below error:

referenceerror: unable process binding "click: function (){return addmaterial }" message: can't find variable: addmaterial

    <table class="table table-bordered">     <thead>       <tr>         <th>moment</th>         <th>antal </th>         <th>kostnad</th>         <th>totalt</th>         <th></th>       </tr>     </thead>     <tbody data-bind="foreach: materials">         <tr>             <td><input data-bind="value: name" /></td>             <td><input data-bind="value: quantity" /></td>             <td><input data-bind="value: rate" /></td>                     <td data-bind="text: formattedtotal"></td>             <td><a href="#" data-bind="click: $root.removematerial" class="fa fa-trash"></a></td>         </tr>     <tfoot>         <tr>           <th colspan="2"><button class="fa fa-plus btn-success" data-bind="click: addmaterial, enable: materials().length < 20"> lägg till rad</button></th>           <th class="text-right">totalt</th>           <th class="text-center"><span data-bind="text: totalsurcharge().tofixed(0)"></span></th>           <th>&nbsp;</th>         </tr>         <tr id="momsrow" class="hidden">           <th colspan="3" class="text-right">moms</th>           <th class="text-center"><span data-bind="text: totalvat().tofixed(1)"></span></th>           <th>&nbsp;</th>         </tr>         <tr id="byggmomsrow" class="hidden">           <th colspan="3" class="">omvänd byggmoms</th>           <th class="text-center"></th>           <th>&nbsp;</th>         </tr>         <tr>           <th colspan="3" class="text-right">totalt:</th>           <th class="text-center"><span data-bind="text: totalplusvat().tofixed(2)"></span></th>           <th>&nbsp;</th>         </tr>     </tfoot>     </tbody>     </table> 

the knockout.js code:

/*------------- load rows ------------- */ function loadrows() { var self = this; self.materials = ko.observablearray([]);  $.getjson("/json/tender_offer_edit_moment_json.asp", function(data) {         self.materials(data);     }) }  //ko.applybindings(new dealmodel());  ko.applybindings(new loadrows());   /*------------- sum table ------------- */ function addmaterial() {        this.name = ko.observable("");     this.quantity = ko.observable("");     this.rate = ko.observable(0);     this.formattedtotal = ko.computed(function() {         return this.rate() * this.quantity();         }, this);  }  function documentviewmodel(){      var self = this;        //create materials array      self.materials = ko.observablearray([         new addmaterial()     ]);      // computed data     self.totalsurcharge = ko.computed(function() {        var total = 0;        (var = 0; < self.materials().length; i++)            total +=  self.materials()[i].formattedtotal();        return total;       });         // add vat(moms 25%) data     self.totalvat = ko.computed(function() {        var totalwithvat = 0;        (var = 0; < self.materials().length; i++)            totalwithvat +=  self.materials()[i].formattedtotal();            totalwithvat = totalwithvat*0.25;        return totalwithvat;     });      // totalt vat(moms 25%) data     self.totalplusvat = ko.computed(function() {        var totalwithvat = 0;        (var = 0; < self.materials().length; i++)            totalwithvat +=  self.materials()[i].formattedtotal();            totalwithvat = totalwithvat*1.25;        return totalwithvat;     });       // operations     self.addmaterial = function() {         self.materials.push(new addmaterial());     }     self.removematerial = function(material) { self.materials.remove(material) }     }    ko.applybindings(new documentviewmodel()); /*------------- sum table end ------------- */ 

there correct json format on ajax request. [{"name":"moment 1","quantity":"1","rate":"10","formattedtotal":"10"},{"name":"moment 2","quantity":"2","rate":"20","formattedtotal":"40"}]

        $.ajax({             url: "/json/tender_offer_edit_moment_json.asp",             type: "get",              datatype: "json",             success: function (data) {                 console.log(data);                 alert(data);                 //new addmaterial(data);                 new addmaterial(data);             }         });  

jsfiddle

first of all, call ko.applybindings() twice , whole page, not suitable in situation: load initial data can smth this:

var vm = new documentviewmodel();  $.getjson("/json/tender_offer_edit_moment_json.asp", function(data) {        vm.materials(data); })  ko.applybindings(vm); 

and delete lines:

function loadrows() {     var self = this;     self.materials = ko.observablearray([]);      $.getjson("/json/tender_offer_edit_moment_json.asp", function(data) {             self.materials(data);         })     }      //ko.applybindings(new dealmodel());  ko.applybindings(new loadrows());