javascript - jsviews - 更新数组元素的字段

Question

我对 jsviews 有疑问。我想绑定(bind)一个元素数组。每个元素都是一个对象。元素是动态添加的。每个元素的一个字段的值基于另一字段计算。怎样才能不每次都刷新数组呢？

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这说明了问题。

Answer 1

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

每次 element.value1 更改时，您都会更新计算属性 element.value2 和 model.recent。

我在这里更新了你的 fiddle 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);
    }
});