CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.js
Shashank
Shashank

Reputation: 399

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

I am creating 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 on keypress event of barcode addOrder event gets executed:

    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 Enter key event is pressed in barcode textbox. The import date and export date value should be changed and also a new TR should be created. I am not able to change the value.

Upvotes: 3

Views: 159

Answers (1)

super cool
super cool

Reputation: 6045

Well you just need to do something like this

View 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());
    });

Catch here is When using type="date" you should always use the format yyyy-MM-dd (W3C standard) for setting .

Working fiddle here

Upvotes: 2

Related Questions