How to access observable element from observable array in knockout.js and change its value
Shashank
I create a ViewModel as:
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('');
}
and execute the addOrder event on the barcode's keypress event:
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>
When the Enter key event is pressed in the barcode text box. ImportDate and ExportDate values should change and a new TR should also be created. I cannot change this value.
super cool
Well, you just have to do something like this
View the model:
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"The caveat when using it is that it should always be set using the yyyy-MM-dd format ( W3C standard ).
work here