javascript - Two way binding failed with nested Objects -

i trying implement two way binding on nested objects , below template

 {{#with refernames(names, active, contacts)}}  <!-- tried {{#with names[contacts[active].names[contacts[active].active]]}} -->     {{name}}     <input value="{{active.data}}" />     <input type="button" value="clone active" on-click="clone" />  {{/with}} 

and below data structure

{    contacts : {       1 : {         active : 0,         names : ["name1"] // keys of names object (collection of names)       }, 2 : {         active : 0,         names : ["name2"]       }    },    names : { // collection of names       name1 : {         name : "abc",         active : {             data : "name1's data 1"         }       },        name2 : {         name : "def",         active : {             data : "name2's data 1"         }       }    },    active : "one",    refernames : function(names, active, contacts){       return names[contacts[active].names[contacts[active].active]];    } } 

and js code,

var r = new ractive({    template : "#template",    el : document.body,    data : data });  r.on('clone', function() {    var t = this, active = t.get('active'),      contacts = t.get('contacts.' + active),     current = contacts.names[contacts.active],     clone = t.get('names.' + current),     someid = math.random().tostring(36).substring(7);     t.set('names.' + someid, clone);    t.unshift('contacts.' + active + '.names', someid);    console.log(t.get('contacts'));    console.log(t.get('names')); }); 

expected behaviour is, whenever names array or active value inside contacts changed, textbox value , name should updated. clones current , appends respective names , contacts, not updated in dom.

what trying

in data object, active property active key used contacts object keys. in example "one", means contacts.one, value

{ active : 0, names : ["name1"] } 

in above object, key names available name values contact , active index of name names used. calculated

active // 1 <global context> names // data each name value, <global context> contacts[active] // contact.one contacts[active].names // available names contact.one, ["name1", "name2" etc..] contacts[active].active // index of name used in available names, in example 0  contacts[active].names[  contacts[active].active ] // "name1" names["name1"] // name1 above line 

finally referring data

  name1 : {      name : "abc",      active : {         data : "name1's data 1"      }   } 

hope clear , please let me know how can fix dynamically change referenced data on change of active.