使用 knockout js 绑定在动态文本框上绑定日期选择器

Question

您好，我在内部项目中使用 ASP.NET MVC 的淘汰赛。

我有一个表单页面（交易页面）包含编号。网格中的客户端并基于点击我在敲除中创建数组对象并相应地绑定 table 行。

在 table 中，我在第一列有一个字段日期，我想在焦点出现在该列上时打开日期选择器。

但我现在面临的问题是，每当我更改客户端选择时，它都会更新 tables 交易列表，而日期选择器不会出现在我想要的文本框中。

HTML 中的敲除绑定：

<table id="idTblTranItems" class="table table-striped table-bordered table-hover table-green dataTable" aria-describedby="dtAllClients_info">
                                    <thead>
                                        <tr class="btn-primary">
                                            <th style="text-align:center">Date<br /> (MM/dd/YYYY)</th>
                                            <th style="text-align:center">Column2</th>
                                            <th style="text-align:center">Column3</th>
                                            <th colspan="2" style="text-align:center">Column4($)</th>
                                            <th style="text-align:center">Tax Column5</th>
                                            <th style="text-align:center">Tax Column6($)</th>
                                            <th style="text-align:center">Net Column7($)</th>
                                            <th style="text-align:center">Notes</th>
                                            <th style="text-align:center">More</th>
                                            <th style="text-align:center">Delete</th>
                                        </tr>
                                    </thead>
                                    <tbody data-bind="foreach: TransactionList" id="tbodyTransactionsNew">
                                        <tr>
                                            <td>
                                                <input class="form-control TransactionDate" type="text" data-bind="value: TransactionDate}" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" data-bind="value: column2" />
</td>
                                            <td>
                                                <input type="text" class="form-control" data-bind="value: column3" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" data-bind="value: column4" />

                                            </td>
                                            <td style="width:40px; border-left:none">
                                               <input type="text" class="form-control" data-bind="value: column5" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" data-bind="value: column6" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" data-bind="value: column7" />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control NetAmount" data-bind="value: column8" />
                                            </td>
                                            <td>
                                                <textarea style="height:34px" class="form-control" data-bind="value: column9"></textarea>
                                            </td>
                                            <td>
                                                <textarea style="height:34px" class="form-control" data-bind="value: column10"></textarea>
                                            </td>
                                            <td>
                                                <textarea style="height:34px" class="form-control" data-bind="value: column11"></textarea>
                                            </td>
                                        </tr>
                                </table>

我的 js:

function TransactionVM(vm) {
            var self = this;
            self.TransactionList = ko.observableArray([]);
            self.Transactionclone = ko.observable();
            self.AccountId = ko.observable();

if (vm.TransList().length > 0) { 对于 (var i = 0; i < vm.TransList().length; i++) { var transaction = new TransactionObj(vm.TransList()[i], vm.Accounts(), vm.Taxcodes()); self.TransactionList.push（交易）； } }

            $('.TransactionDate').datepicker({
                    autoclose: true,
                    format: 'mm/dd/yyyy',
                    startDate: date
                });
}

ko.applyBindings(new TransactionVM(ko.mapping.fromJS(transactionlist)));

你可以看到我有 TransactionDate class 绑定日期选择器，但是当我点击文本框时，日期选择器没有出现，在上面的日期选择器初始化中，我有一个循环，我实际上在其中创建了 TransactionObj viewmodel 的新对象。

不知道我该怎么做，这对我来说是个大问题我也试过 this article 但没有帮助我有多个文本框，我也可以添加新的交易，并希望新的日期选择器也创建了文本框。

创建 jsfiddle 是一个卑微的请求，所以我很容易理解，因为我刚刚开始淘汰 js 谢谢。

Answer 1

您可以为日期选择器创建一个 custom ko binding，当控件数据绑定时将被调用。

例如

ko.bindingHandlers.datePicker = {
  init: function(element, valueAccessor) {
    var $element = $(element);
    $element
      .datepicker({
        autoclose: true,
        format: 'mm/dd/yyyy'
      });
  },
  update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor());
    var $element = $(element);
    $element.datepicker("setDate", value);
  }
};

function TransactionVM(vm) {
  var self = this;
  self.TransactionList = ko.observableArray([]);

  self.loadList = function(transactions) {
    self.TransactionList([]);
    transactions.forEach(function(transaction) {
      self.TransactionList.push(transaction);
    });
  };
}

var vm = new TransactionVM();
ko.applyBindings(vm);

var iteration = 1;
function addData() {
  var transactions = [];
  for (var i = 0; i < 10; i++) {
    transactions.push({
      TransactionDate: new Date(),
      column2: "testing round " + iteration + " item " + i
    });
  }
  vm.loadList(transactions);
  iteration++;
}

$("#add").click(addData);

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<table id="idTblTranItems" class="table table-striped table-bordered table-hover table-green dataTable" aria-describedby="dtAllClients_info">
  <thead>
    <tr class="btn-primary">
      <th style="text-align:center">Date<br /> (MM/dd/YYYY)</th>
      <th style="text-align:center">Column2</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: TransactionList" id="tbodyTransactionsNew">
    <tr>
      <td>
        <input class="form-control TransactionDate" type="text" data-bind="datePicker: TransactionDate" />
      </td>
      <td>
        <input type="text" class="form-control" data-bind="value: column2" />
      </td>
    </tr>
</table>
<button id="add">Add</button>

使用 knockout js 绑定在动态文本框上绑定日期选择器

Bind datepicker on dynamic textbox with knockout js binding

javascript

jquery

datepicker

knockout-mapping-plugin

knockout.js