底层数据改变时，JSViews模板不更新

Question

当底层数据发生变化时，我有一个JSViews模板更新的问题。它涉及到一个跨度，该跨度使用一个转换函数与底层数据进行数据链接。当底层数据在异步回调到服务器后发生更改时，span文本不会更新。

标记:

{^{for thedata.myarrayobject}}
    <span data-link="{myconverter:var1:} name{:'theName' + var2}"></span>
{{/for}}

脚本:

$.views.converters({
    myconverter: function (val) {
        switch (val) {
            case 1: 
                return 'Test1'; 
                break;
            case 2: 
                return 'Test2';
                break;
            default: 
                return 'Default';
        }
    }
});

span根据data.myarrayobject中的值在页面加载时正确显示。例如，如果我们有:

thedata.myarrayobject[0].var1='1';
thedata.myarrayobject[0].var2='John';
thedata.myarrayobject[1].var1='2';
thedata.myarrayobject[1].var2='Matthew';

将加载为:

<span name="theNameJohn">Test1</span>
<span name="theNameMatthew">Test2</span>

但是，如果底层数据在异步回调后发生了变化:

thedata.myarrayobject[0].var1='2';
thedata.myarrayobject[0].var2='John';
thedata.myarrayobject[1].var1='1';
thedata.myarrayobject[1].var2='Matthew';

span文本保持不变。

我已经调试了js代码，底层数组参数'var1'肯定被设置为新值。我试过打电话:

$.observable(thedata.myarrayobject).refresh(thedata.myarrayobject);

但无济于事。

我显然希望span文本调整为底层数据的变化-任何帮助将非常感激!

Answer 1

实际上，要进行更新，您需要选择自己的策略来将新数据(例如来自Ajax调用)与以前的数据合并。

但是任何合并都必须使用'observable' api 来完成——这样JsViews就可以接收到数据链接的更新通知并更新你的UI。

因此，根据您的数据和场景，您可以使用以下任何类型的更新:

1. 每次修改一个叶子值:

   $.observable(thedata.myarrayobject[0]).setProperty("var1", "2");

2. 每次修改一个对象的叶子值:

   $.observable(thedata.myarrayobject[0]).setProperty(newarrayobject[0]);

   (这将拾取任何修改的属性)

3. 用新对象刷新整个数组:

   $.observable(thedata.myarrayobject).refresh(newarrayobject);

   (这将把新的对象/项复制到myarrayobject中)

4. 用新对象更新myarrayobject:

   $.observable(thedata).setProperty("myarrayobject", newarrayobject);

   所以你在这里用一个新的数组替换数组…

以上任何一个或每一个都将触发使用新数据值的更新。

注意，上面的方法假设你已经下载了一个新的数据数组，newarrayobject，其中包含更新的数据合并到你之前的myarrayobject。您不需要克隆newarrayobject或之前的myarrayobject。

Answer 2

在BorisMoore上面问了几个问题之后…我更新数据的方式-只是将其直接推入如上所述的数组参数:

thedata.myarrayobject[0].var1='2';
thedata.myarrayobject[0].var2='John';
thedata.myarrayobject[1].var1='1';
thedata.myarrayobject[1].var2='Matthew';

不起作用，我对$.observable(…).refresh(…)的调用也不起作用，因为我传递的是相同的数组:没有触发任何更改来更新标记。

简单地说，我将数组复制到一个新的数组，更新值，然后调用refresh，这是有效的:

var myduparrayobject = thedata.myarrayobject.splice();
myduparrayobject [0].var1='2';
myduparrayobject [0].var2='John';
myduparrayobject [1].var1='1';
myduparrayobject [1].var2='Matthew';
$.observable(thedata.myarrayobject).refresh(myduparrayobject);

问题:

1. 只有对数组的可观察更改才会刷新到标记中。不仅仅是像我想象的那样简单地更新对象数据。

2. $.observable(…).refresh(…)只在被引用对象的数组被改变时起作用。像我一样传递相同的引用对象(即使它与标记中显示的内容不同)不会触发对模板标记的更改。