Question

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

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

ReferenceError：无法处理绑定＆＃34; click：function（）{return addMaterial}＆＃34;消息：无法找到变量：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格式。 [{＆＃34; name＆＃34;：＆＃34; Moment 1＆＃34;，＆＃34; quantity＆＃34;：＆＃34; 1＆＃34;，＆＃34; rate＆＃34;：＆＃ 34; 10＆＃34;，＆＃34; formattedTotal＆＃34;：＆＃34; 10＆＃34;}，{＆＃34; name＆＃34;：＆＃34;时刻2＆＃34;，＆＃34;量＆＃34;：＆＃34; 2＆＃34;＆＃34;速率＆＃34;：＆＃34; 20＆＃34;＆＃34; formattedTotal＆＃34;：＆＃34; 40＆＃34;} ]

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

Knockout.js - Sum表，添加行并用AJAX填充表

1 个答案: