javascript - 使用knockout js绑定(bind)在动态文本框上绑定(bind)日期选择器

Question

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

我有一个表单页面(交易页面)，其中包含以下内容:网格中的客户端并基于点击我在 knockout 中创建数组对象并相应地绑定(bind)表行。

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

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

HTML 中的 knockout 绑定(bind):

<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 < 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 类绑定(bind)日期选择器，但是当我单击文本框时日期选择器没有出现，并且在上面的日期选择器初始化中我有 for 循环，我实际上在其中创建了 TransactionObj View 模型的新对象。

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

创建 jsfiddle 是一个谦虚的请求，这样我就可以轻松理解，因为我刚刚开始 knockout js，谢谢。

Answer 1

您可以创建 custom ko binding用于当控件进行数据绑定(bind)时将调用的日期选择器。

例如

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>