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

Question

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.

super cool · Accepted Answer · 2015-03-23 12:17:26Z

2

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

answered Mar 23, 2015 at 12:17

super cool

6,0653 gold badges34 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related