javascript - Knockout.js - 求和表、添加行并使用 AJAX 填充表

Question

我使用此表添加 Material ，并使用 Knockoutjs-3.4.0.js 添加行并对其求和。我的问题是，当我尝试编辑代码时，我想用 AJAX 请求填充表。问题是我不知道如何用 AJAX 响应填充表格。

如果我使用下面的代码，我会收到此错误:

ReferenceError: Unable to 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>

knockout.js 代码:

/*------------- 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 a materials array 
    self.materials = ko.observableArray([
        new addMaterial()
    ]);

    // Computed data
    self.totalSurcharge = ko.computed(function() {
       var total = 0;
       for (var i = 0; i < self.materials().length; i++)
           total +=  self.materials()[i].formattedTotal();
       return total;


    });  


    // add VAT(moms 25%) data
    self.totalVat = ko.computed(function() {
       var totalWithVat = 0;
       for (var i = 0; i < self.materials().length; i++)
           totalWithVat +=  self.materials()[i].formattedTotal();
           totalWithVat = totalWithVat*0.25;
       return totalWithVat;
    });

    // Totalt with VAT(moms 25%) data
    self.totalPlusVat = ko.computed(function() {
       var totalWithVat = 0;
       for (var i = 0; i < 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 ------------- */

AJAX 请求上有正确的 json 格式。[{"name":"时刻 1","quantity":"1","rate":"10","formattedTotal":"10"},{"name":"时刻 2","quantity": "2","费率":"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);
            }
        }); 

Answer 1

JsFiddle

首先，您对整个页面调用 ko.applyBindings() 两次，它不适合您的情况:要加载初始数据，您可以这样做:

var vm = new documentViewModel();

$.getJSON("/json/tender_offer_edit_moment_json.asp", function(data) {
       vm.materials(data);
})

ko.applyBindings(vm);

并删除此行:

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());