操纵knockout.js中的表

Posted 2021-05-05

我在knockout.js.But成功消费api根据我的表定义（id，名称，借方，贷方，金额），这是基于会计。我想显示的金额，如果它是信用卡或借记卡，因为不是所有的金额在借记和贷记的同时。帮助我分别在redit和debit下显示金额。这是视图模型

 function JournalViewModel() {
var self = this;
self.Period = ko.observable();
self.PayGroup = ko.observable();
self.PayGroups = ko.observableArray([]);



self.LoadPeriods = function () {

    $.ajax({

        url: baseUrl + 'api/Process/Load',
        type: 'GET',
        headers: { 'Access-Control-Allow-Origin': '*' },
        dataType: 'json',
        success: function (data) {
            console.log(data);
            if (data.Successfull == 1) {
                self.Period(data.Model.CurrentPeriod);
                self.PayGroups(data.Model.Paygroups);
            }

        },
        error: function (request, error) {
            console.log(error);
        }
    });
}

self.periodId = ko.observable();
self.PaygroupId = ko.observable();
self.Journal = ko.observableArray([]);
self.PayMaster = ko.observableArray();

self.LoadJournal = function () {

    $.ajax({

        url: baseUrl + 'api/Journal/LoadJournal/'+periodId +'/'+self.PaygroupId(),
        type: 'GET',
        cache: false,
        headers: { 'Access-Control-Allow-Origin': '*' },
        dataType: 'json',
        success: function (data) {              
            if (data.HasError == 0) {
                self.Journal(data.Model);
                console.log(data.Model);
                alert("Journal Successfully Processed");
                $("#listTable").DataTable();

            }

        },
        error: function (request, error) {
            console.log(error);
        }
    });
}

self.StartDate = ko.observable()
self.EndDate = ko.observable()
self.NbDays = ko.observable();
self.NbHours = ko.observable();
self.Code = ko.observable();
self.CountEmployees = ko.observable();
self.LoadPeriods();
}ko.applyBindings(new JournalViewModel());

这是我的看法

  @{
    ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
  <nav role="navigation" aria-labelledby="system-breadcrumb">
 <ol class="breadcrumb">
    <li><a href="#">Process</a></li>
    <li><a href="#">Journals</a></li>
 </ol>
 </nav>
  <div class="box box-primary">
  <div class="box-body">
    <div class="col-md-12">
        <div class="col-md-2">
             <div class="form-group">
                <label for="PeriodTxt">Pay Group</label>
                <select data-bind="options: PayGroups,
                    optionsText: 'Name',
                    optionsValue: 'Id',
                    optionsCaption: 'Choose...',
                    value:PaygroupId" class="form-control"></select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="PeriodTxt">Period</label>
                <input id="FullNameTxt" class="form-control" type="text" 
   readonly="readonly"
                       data-bind="value:Period()?Period().Code:''" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="StatusTxt">Number of Hours</label>
                <input id="StatusTxt" class="form-control" type="text" 
 readonly="readonly"
                       data-bind="value:Period()?Period().NbHours:''" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="ds"></label>
                <input type="submit" value="Load Journal" data-
  bind="click:LoadJournal" class="btn btn-primary btn-block" />
            </div>
        </div>
    </div>
 </div>
 </div>
  <div class="well">
   <div class="well-body">
    <table id="listTable" class='table table-striped table-bordered'>
        <thead>
            <tr>
                <th>
                    Account Code
                </th>
                <th>
                    Name
                </th>
                <th>
                    Debit
                </th>
                <th>
                    Credit
                </th>

            </tr>
        </thead>
        <tbody data-bind="foreach:Journal">             
                <tr>
                    <td data-bind="text:AcctId">                            
                    </td>
                    <td data-bind="text:AcctDescription">                           
                    </td>
                    <!-- ko if:Debit==1 -->
                    <td data-bind="text:Amount">                        
                    </td>
                    <!-- /ko -->
                    <!-- ko if:Credit==1 -->
                    <td data-bind="text:Amount"></td>
                    <!-- /ko -->                                                                
 </tr>

        </tbody>
    </table>
</div>
 </div>
 @section Scripts{
 <script>periodId = '@ViewBag.PeriodId';</script>
 }

答案

问题是你在标签上有if条件，如果为false则不会呈现。诀窍是将它放在标签内，因为你希望它一直显示，而不是内部的值。 （如果我正确理解你的问题）

<table>
  <thead>
    <tr>
      <th>Account Code</th>
      <th>Name</th>
      <th>Debit</th>
      <th>Credit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-bind="text:AcctId"></td>
      <td data-bind="text:AcctDescription"></td>
      <td>
        <span data-bind="if: Debit == 1">
          <!-- ko text: Amount -->
          <!-- /ko -->
        </span>
      </td>
      <td>
        <span data-bind="if: Credit == 1">
          <!-- ko text: Amount -->
          <!-- /ko -->
        </span>
      </td>
    </tr>
  </tbody>
</table>