javascript - jsviews - Update field of array element -

i have issue jsviews. want bind array of elements. each element object. elements added dynamicaly. value of 1 field of each element computes base on field. how posiible without refreshing array every time?

js:

model = {     elements: [] }; $(function() {     $.when($.templates('#tmpl').link('#container', model)             .on('click', '#addelement', function () {                 $.observable(model.elements).insert({});             })     ).done(function() {         $.observe(model, 'elements', function(e, eventargs) {             if (eventargs.change === 'insert') {                 eventargs.items.foreach(function(addedelement) {                     $.observe(addedelement, 'value1', function(e) {                         var element = e.target;                         element.value2 = 'value1 ' + element.value1;                         $.observable(element).setproperty('value2', element.value2);                         $.observable(model).setproperty('recent', element.value1);                     });                 });             }         });     }); }); 

html:

<div id="container"></div>  <script id="tmpl" type="text/x-jsrender">     <input id="addelement" type="button" value="add new element"/>     <div id="box">         {^{for elements tmpl="#elementtmpl"/}}     </div>     <input type="text" data-link="recent" /> </script>  <script id="elementtmpl" type="text/x-jsrender">     <div>         <input name="input1" data-link="value1" />         <input name="input2" data-link="value2" />     </div> </script> 

i created jsfiddle illustrates problem.

you can use observeall(): http://www.jsviews.com/#observeall.

every time element.value1 changes, update calculated properties element.value2 , model.recent.

i updated fiddle here https://jsfiddle.net/1rjgh2sn/2/ following:

$.templates('#tmpl').link('#container', model)     .on('click', '#addelement', function () {         $.observable(model.elements).insert({});     }); $.observable(model).observeall(function(e, eventargs) {     if (eventargs.change === "set" && eventargs.path === "value1") {         var element = e.target;         $.observable(element).setproperty('value2', 'value1 ' + element.value1);         $.observable(model).setproperty('recent', element.value1);     } });