knockout.js update observables inside observable array

This demo shows you how can you update few observable items inside observableArray

by pkysylevych

HTML

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body class='ui-widget'>
    <div class='container'>
       <!-- ko foreach: vals -->
         <div class='label' data-bind="visible: $root.idx() == $index()">
           <span class='lbl' data-bind="text: label"></span>:
           <input type='text' data-bind="value: item">
           <input type='button' value="save" data-bind="click: function()
             { $root.idx(-1);}" />
         </div>
         <div class='label' data-bind="visible: $root.idx() != $index()">
           <span class='lbl' data-bind="text: label"></span>:
           <span data-bind="text: item"></span>
           <input type='button' value="modify" data-bind="click: function()
             { $root.idx($index());}" />
         </div>
       <!-- /ko -->
    </div>
  </body>
</html>

CSS

span.lbl {
    width: 80px;
    font-weight:bold;
}

JavaScript

var myViewModel = {
    vals: ko.observableArray([
        {label: 'first',  item: ko.observable('one')},
        {label: 'second', item: ko.observable('two')},
        {label: 'third',  item: ko.observable('three')}
    ]),
    idx: ko.observable(-1)
};

  
ko.applyBindings(myViewModel);