JSViews 模板在基础数据更改时不更新
JSViews template not updating when the underlying data changes
我在基础数据更改时更新 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';
}
}
});
跨度根据 thedata.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);
但无济于事。
我显然希望跨度文本随着基础数据的变化而调整 - 任何帮助将不胜感激!
在 BorisMoore 上面问了几个问题之后......我更新数据的方式 - 就像上面那样将它直接推入数组参数:
thedata.myarrayobject[0].var1='2';
thedata.myarrayobject[0].var2='John';
thedata.myarrayobject[1].var1='1';
thedata.myarrayobject[1].var2='Matthew';
没有工作,我对 $.observable(...).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);
问题:
只有对数组的可观察更改才会刷新到标记中。不仅仅是像我想象的那样简单地更新对象数据。
$.observable(...).refresh(...) 仅在传入引用对象的更改数组时才有效。像我一样传递相同的引用对象(即使它与标记中显示的内容不同)不会触发对模板标记的更改。
事实上,要进行更新,您需要选择自己的策略来将新数据(例如来自 Ajax 调用)与以前的数据合并。
但是任何合并 都必须使用 'observable' API 完成 - 这样 JsViews 才能接收数据链接更新通知并更新您的 UI。
因此,根据您的数据和场景,您可以使用以下任何一种更新:
一次更改一个叶值:
$.observable(thedata.myarrayobject[0]).setProperty("var1", "2");
一次更改一个对象的叶值:
$.observable(thedata.myarrayobject[0]).setProperty(newarrayobject[0]);
(这将选取任何已修改的属性)
用新对象刷新整个数组:
$.observable(thedata.myarrayobject).refresh(newarrayobject);
(这会将新的 objects/items 复制到 myarrayobject 中)
用新对象更新 myarray 对象:
$.observable(thedata).setProperty("myarrayobject", newarrayobject);
所以在这里你要用一个新的数组替换数组...
以上任何一项或每一项都将触发新数据值的更新。
请注意,上述方法假设您已经下载了一个新的数据数组 newarrayobject
,其中包含要合并到您之前的 myarrayobject
中的更新数据。您不需要克隆 newarrayobject
或之前的 myarrayobject
.
我在基础数据更改时更新 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';
}
}
});
跨度根据 thedata.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);
但无济于事。
我显然希望跨度文本随着基础数据的变化而调整 - 任何帮助将不胜感激!
在 BorisMoore 上面问了几个问题之后......我更新数据的方式 - 就像上面那样将它直接推入数组参数:
thedata.myarrayobject[0].var1='2';
thedata.myarrayobject[0].var2='John';
thedata.myarrayobject[1].var1='1';
thedata.myarrayobject[1].var2='Matthew';
没有工作,我对 $.observable(...).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);
问题:
只有对数组的可观察更改才会刷新到标记中。不仅仅是像我想象的那样简单地更新对象数据。
$.observable(...).refresh(...) 仅在传入引用对象的更改数组时才有效。像我一样传递相同的引用对象(即使它与标记中显示的内容不同)不会触发对模板标记的更改。
事实上,要进行更新,您需要选择自己的策略来将新数据(例如来自 Ajax 调用)与以前的数据合并。
但是任何合并 都必须使用 'observable' API 完成 - 这样 JsViews 才能接收数据链接更新通知并更新您的 UI。
因此,根据您的数据和场景,您可以使用以下任何一种更新:
一次更改一个叶值:
$.observable(thedata.myarrayobject[0]).setProperty("var1", "2");
一次更改一个对象的叶值:
$.observable(thedata.myarrayobject[0]).setProperty(newarrayobject[0]);
(这将选取任何已修改的属性)
用新对象刷新整个数组:
$.observable(thedata.myarrayobject).refresh(newarrayobject);
(这会将新的 objects/items 复制到 myarrayobject 中)
用新对象更新 myarray 对象:
$.observable(thedata).setProperty("myarrayobject", newarrayobject);
所以在这里你要用一个新的数组替换数组...
以上任何一项或每一项都将触发新数据值的更新。
请注意,上述方法假设您已经下载了一个新的数据数组 newarrayobject
,其中包含要合并到您之前的 myarrayobject
中的更新数据。您不需要克隆 newarrayobject
或之前的 myarrayobject
.