如何从 knockout.js 中的可观察数组访问可观察元素并更改其值

Question

我正在创建一个 ViewModel 作为：

function PurchaseOrderViewModel() {
    var self = this;
    self.seqNo = ko.observable(1);
    self.barcode = ko.observable('');
    self.expDate = ko.observable('');
    self.importDate = ko.observable('');
    self.name = ko.observable('');
}

并且在条形码的按键事件上执行 addOrder 事件：

    function OrderCollection() {
        var self = this;
        self.ShirtOrder = ko.observableArray([new PurchaseOrderViewModel()]);

        self.addOrder = function (data, event) {
            if (event.keyCode == 13) {
//Here before pushing new object to self.ShirtOrder. I want to access current object and change its expDate and importDate value.

                var _SO = new PurchaseOrderViewModel();
                _SO.seqNo = $("#SOBody > tr").length + 1;
                self.ShirtOrder.push(_SO);
            }
        };
    }

HTML:

<tbody data-bind="foreach: ShirtOrder()" id="SOBody">
   <tr>
      <td>
         <input type="text" value="1" class="req measurment" data-bind="value: seqNo" />
      </td>
      <td>
         <input type="text" class="" data-bind="value: barcode, valueUpdate: 'afterkeydown', 
            event: { keypress: $parent.addOrder }" />
      </td>
      <td>
         <input type="date" class="req measurment" data-bind="value: expDate" />
      </td>
      <td>
         <input type="date" class="req measurment" data-bind="value: importDate" />
      </td>
      <td>
         <input type="text" class="req measurment" data-bind="value: name" />
      </td>
   </tr>
</tbody>

当在条码文本框中按下回车键事件。应更改导入日期和导出日期值，还应创建新的 TR。我无法更改该值。

Answer 1

好吧，你只需要做这样的事情就可以了

查看模型：

    function OrderCollection() {
            var self = this;
            self.ShirtOrder = ko.observableArray([new PurchaseOrderViewModel()]);
            self.addOrder = function (data,event) {
                if (event.keyCode == 13) {
                    data.expDate('2014-10-27'); // you get current instance here 
                    data.importDate('2015-01-20');
                    var _SO = new PurchaseOrderViewModel();
                    self.ShirtOrder.push(_SO);
                }
            };
        }

     $(function() {
         ko.applyBindings(new OrderCollection());
    });

这里要注意当使用 type="date" 时，您应该始终使用格式 yyyy-MM-dd (W3C standard) 来设置 .

工作fiddlehere

如何从 knockout.js 中的可观察数组访问可观察元素并更改其值

How to access an observable element from observable array in knockout.js and change its value

html

javascript

jquery

knockout.js