jsviews - Обновление поля элемента массива

Question

У меня проблема с jsviews. Я хочу связать массив элементов. Каждый элемент является объектом. Элементы добавляются динамически. Значение одного поля каждого элемента вычисляет базу в другом поле. Как это можно сделать без обновления массива каждый раз?

ЯШ:

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 is ' + 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> 

Я создал jsfiddle, который иллюстрирует эту проблему.

Answer 1

Вы можете использовать ObserveAll(): http://www.jsviews.com/#observeAll.

Каждый раз, когда изменяется element.value1, вы обновляете вычисленные свойства element.value2 и model.recent.

Я обновил свою скрипку здесь https://jsfiddle.net/1rjgh2sn/2/ следующие:

$.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 is ' + element.value1); 
     $.observable(model).setProperty('recent', element.value1); 
    } 
});