动态文本框绑定日期选择器与淘汰赛js绑定

Question

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

我有一个表单页面（交易页面），编号为。在网格中的客户端和基于点击我创建基于淘汰赛的数组对象并相应地绑定表格行。

在表格中，我在第一列有一个字段日期，并且想要在焦点到达该列时打开datepicker。

但我现在面临的问题是，每当我更改客户端选择它更新表事务列表和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(); 

如果（vm.TransList（）长度> 0）{ 为（VAR I = 0 （），vm.TransList（），vm.Taxcodes（））; var i = new TransactionObj（vm.TransList（）[i]，vm.Accounts（），vm.Taxcodes（））; self.TransactionList.push（transaction）; } }

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

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

你可以看到我有TransactionDate类结合日期选择器，但是当我点击文本框日期选择不来，并在上述日期选择器初始化我有一个循环，我实际创建TransactionObj视图模型的新对象。

不知道我该怎么做这对我来说是个大问题我也尝试过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>