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

时间:2015-09-16 11:17:40

标签: jquery jsrender jsviews data-linking

当基础数据发生变化时,我遇到了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';
        }
    }
});

根据数据.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';

跨度文本只是保持不变。

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

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

但无济于事。

我显然希望在基础数据发生变化时调整范围文本 - 任何帮助都将非常感谢!

2 个答案:

答案 0 :(得分:2)

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

但任何合并必须使用&#39; observable&#39; 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更新myarrayobject:

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

    所以在这里你用新的替换阵列......

  5. 上述任何一个或每个都将使用新数据值触发更新。

    请注意,上述方法假设您已下载新数据数组newarrayobject,其中包含要更新的数据以合并到之前的myarrayobject中。您不需要克隆newarrayobject或之前的myarrayobject

答案 1 :(得分:1)

好吧,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(...)仅在传入引用对象的已更改数组时有效。传递与我相同的引用对象(即使它与正在标记中显示)不会触发对模板标记的更改。