Question

我只是关于knockout.js的新学习者。我的单页应用程序将有一个表与数据绑定许多记录。每行表将有2个输入，即数据绑定后的请求计数和请求数量。 image1

表格每行中的2个输入是可写的，具有以下情况的计算函数：

在输入请求计数中输入值时，将立即显示输入时请求的金额（请求计数乘以牛仔布值）。

Image2

在输入请求金额中输入值时，输入的请求计数应自动显示（输入请求金额除以面额值）但无法显示。

Image3

现在我的问题是在请求金额密钥输入后，请求的计数未显示成功，但第一个方案成功

以下是我的代码：

enter code here

function Model(noteValue, noteCount) {
    var self = this;
    this.denom = ko.observable(noteValue);
    this.available = ko.observable(noteCount);
    this.requestedCount = ko.observable(); 
    this.CMCurrencyCode = ko.observable("MYR");
    this.CMDispensedAmount = ko.observable(0.00); 

    self.RequestedAmount = ko.pureComputed( {
        read: function () {

            return parseFloat(self.denom() * self.requestedCount()).toFixed(2).toLocaleString();

        },
        write: function (val) {

            ReqCount = parseFloat(val) / parseFloat(self.denom());

            self.requestedCount(ReqCount);
        }
    });
}

    function ViewModel() {
    var self = this;
    self.ArrayOfCassettes([]);

    this.GetConfiguration = function () {
         //browse to server to get data
         var uri = 'http://localhost/tcrwebapi/;

         $.getJSON(uri)
         .done(function (data) {
            myObj = data["param"];

            for (m in myObj[i]["Denomination"]["lpCurrencies"]) {
               denom = parseInt(myObj[i]["denom"]["currency"][m]["denomvalue"]);

               available = parseInt(myObj[i]["denom"]["currency"][m]["available"]);
            }
           self.ArrayOfCassettes.push(new Model(denom, available));
     }

 }

以下是我的用户界面：

<table class="table table-hover table-striped table-sm">
<thead class="thead-default">
    <tr>
        <th style="text-align: center;"> Currency </th>
        <th style="text-align: right;"> Denom </th>
        <th style="text-align: right;"> Available </th>
        <th style="text-align: right;"> Requested Count</th>
        <th style="text-align: right;"> Requested Amount</th>
        <th style="text-align: right;"> Dispensed Amount</th>
    </tr>
</thead>
<tbody data-bind="foreach: ArrayOfCassettes()">
    <tr>
        <td class="success" style="text-align: center;" data-bind="text: CMCurrencyCode"></td>
        <td class="success" style="text-align: right;" data-bind="text: denom"></td>
        <td class="success" style="text-align: right;" data-bind="text: available"></td>
        <td class='success' style="text-align: right;" ">
            <input type="number"  data-bind="numeric, value: CMAutoDispenseCounter, valueUpdate: 'afterkeydown'" />

        </td>

        <td class='success' style="text-align: right;" data-bind="visible: CMDisplayInput">
            <input type="text"  data-bind="numeric, value: CMAutoDispenseAmount(), valueUpdate: 'afterkeydown'" />
        </td>
        <td class="success" style="text-align: right;" data-bind="text: CMDispensedAmount()"></td>
    </tr>
</tbody>

由于

具有计算功能的knockout observablearray读写

0 个答案: