Question

我的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来说明问题。

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);
    }
});

jsviews - 更新数组元素的字段

1 个答案: