jquery - 当底层数据发生变化时，JSViews 模板不会更新

Question

当底层数据发生变化时，我遇到了 JSViews 模板更新的问题。它涉及使用转换器函数将数据链接到基础数据的跨度。当异步回调到服务器后底层数据发生变化时，跨度文本不会更新。

标记:

{^{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';
        }
    }
});

跨度根据 data.myarray 对象中的值在页面加载时正确显示。例如。如果我们有:

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';

跨度文本保持不变。

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

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

但没有效果。

我显然希望跨度文本随着基础数据的变化而调整 - 任何帮助将不胜感激!

Answer 1

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

但是任何合并都必须使用“可观察”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。