Question

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

我有一个不包含的表单页面（交易页面）。网格中的客户端和基于click的我在knockout中创建arrayobject并相应地绑定表行。

在表格中，我在第一列有一个字段日期，并希望在焦点出现在该列时打开datepicker。

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

HTML中的Knockout绑定：

<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＆gt; 0）{ for（var i = 0; i＆lt; 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类绑定datepicker但是当我点击文本框时，datepicker没有到来并且在上面的datepicker初始化中我有for循环，我实际创建了TransactionObj viewmodel的新对象。

不知道我怎么能这样做对我来说这是一个大问题我也尝试了this article但没有帮助我有多个文本框我也可以添加新的交易以及想要在新创建的文本框上使用datepicker。

创建jsfiddle是谦虚的要求所以我很容易理解因为我刚刚开始淘汰js谢谢你。

Answer 1

你可以为datepicker创建一个custom ko binding，当控件被数据绑定时，它将被调用。

e.g。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

使用knockout js绑定在动态文本框上绑定datepicker

1 个答案: