2015-07-10 48 views
1

我有一個jsviews的問題。我想要綁定一組元素。每個元素都是一個對象。元素是動態添加的。每個元素的一個字段的值計算另一個字段的基數。每次刷新數組的時候怎麼做呢?jsviews - 數組元素的更新字段

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 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這說明了這個問題。

回答

1

您可以使用ObserveAll()http://www.jsviews.com/#observeAll

每次更改element.value1時,都會更新計算的屬性element.value2model.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); 
    } 
}); 
+0

感謝您的快速答覆! –