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

Question

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

我有一个表单页面（交易页面），其中没有。网格中的客户端数量并基于单击我在敲除中创建 arrayobject 并相应地绑定表行。

在表格中，我在第一列有一个字段日期，并且希望在焦点位于该列时打开日期选择器。

但是我现在面临的问题是，每当我更改客户端选择时，它都会更新表格事务列表，并且 datepicker 不会出现在我想要的文本框中。

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) { for (var i = 0; i

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

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

你可以看到我有 TransactionDate 类绑定 datepicker 但是当我点击文本框时 datepicker 没有出现，在上面的 datepicker 初始化中我有 for 循环，我实际上创建了 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>