How to subscribe to child observable from parent observable in Knockout

Question

I have an KO observables like this DEMO

var  list = function(){
    var array  = [{val :'1'}, {val :'2'}, {val :'3'}, {val :'4'}];
    var that = this;
    this.inputs = ko.observableArray();

    array.forEach(function(obj){
        var val = ko.observable(obj.val);
        that.inputs.push(val);

        //Subscribe to each element
        val.subscribe(function(val){
           console.log(val);
        });

    });
}

ko.applyBindings(new list());

And I am using inputs to populate data in fields like

 <ul data-bind="foreach: inputs">
    <input type="text" data-bind="value :$data" />
</ul>

So when ever I change the input data is there a way to know the parent is getting updated with new entered data since all values are observable.

So as per knockout-js-observable-array-changes-to-individual-observable-items

I make each item as observable and try to subscribe the changes

//Subscribe to each element
   val.subscribe(function(val){
       console.log(val);
   });

but that too doesn't work , how to implement this knockout-js-observable-array-changes-to-individual-observable-items solution.

Answer 1

Don't put ko.observable directly into your ko.observableArray but create objects which have observable properties.

So change your array filling code to:

var val = ko.observable(obj.val);
that.obs.push({val: val});

And your view to:

<ul data-bind="foreach: inputs">
    <input type="text" data-bind="value: val" />
</ul>

Demo JSFiddle.