如何使用Kendo数据源中的新数据来刷新列表视图
How to get a listview to refresh with new data from a Kendo datasource
当我将新数据加载到我的kendo.data.DataSource时,如何刷新我的列表视图页面?
我正在使用Telerik AppBuilder开发一款混合移动应用程序。我有一个绑定到数据源的简单列表视图。我使用ajax POST请求来加载一些JSON,然后将其放置在数据源中。我有两个页面,主页和列表视图。主页具有一些指向单个列表视图页面的锚点,但是具有不同的数据id值以产生不同的列表。
我第一次访问列表视图页面时,它加载正确。之后,当我重新加载数据源时,列表视图不会刷新;无论我发送什么数据id值,第一个列表的内容总是显示出来
以下是来源:
JavaScript
window.APP =
{
blamListSource: null,
home:
{
fetchBlam: function(event)
{
var argumentData = event.button.data();
var requestBody =
{
"requestVersionId": "1",
"blamId": argumentData.id.toString()
};
$.ajax(
{
url: getBlamURI,
type: "POST",
data: JSON.stringify(requestBody),
dataType: "json",
contentType: 'application/json',
success: function(requestData, textStatus, jqxhr)
{
APP.blamListSource = new kendo.data.DataSource(
{
data: requestData.userList,
});
APP.blamListSource.read();
app.navigate("views/blamlist.html");
},
error: function(jqxhr, textStatus, error)
{
alert("Error");
},
});
}
}
};
home.html
<div data-role="view" data-title="Home" data-layout="main"
data-model="APP.models.home" data-zoom="true">
<div id="form-blam" data-role="content">
<a id="commercial" data-role="button"
data-bind="click: fetchBlam" data-id="27">Something</a>
<a id="personal" data-role="button"
data-bind="click: fetchBlam" data-id="39">Something Else</a>
</div>
</div>
views/blamlist.html
<div data-role="view" data-title="Blam List" data-layout="main"
data-model="APP" data-zoom="true">
<div data-role="navbar">
<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
</div>
<ul id="blam-listview" data-style="inset" data-role="listview"
data-template="blamListTemplate" data-bind="source: blamListSource">
</ul>
<p id="no-contactlist-span" hidden="hidden" class="no-items-msg">
<b>No blam.</b>
</p>
</div>
<!-- Blam ListView Template -->
<script type="text/x-kendo-template" id="blamListTemplate">
<div>
<div>
<img id="blamPhoto" src="#: data.photoUri #"/>
</div>
<div>
<div id="name">#: data.name #</div>
<div>#: data.title #</div>
<div>
<div>
<a data-role="button" class="callimg"
data-phone="#: data.phone #" href="tel:#: data.phone #"
data-rel="external"></a>
</div>
<div>
<a data-role="button" class="emailimg"
href="mailto:#: data.email #"
data-rel="external"></a>
</div>
</div>
</div>
</div>
</script>
这看起来相当容易。
将数据reload="true"添加到视图中。
旧-不刷新
<div data-role="view" data-title="Blam List" data-layout="main"
data-model="APP" data-zoom="true">
新增-刷新
<div data-role="view" data-title="Blam List" data-layout="main"
data-model="APP" data-zoom="true" data-reload="true">
编辑我不小心放了"数据刷新",这是错误的。正确的值(编辑为正确值)是"数据重新加载"。
相关文章:
- 如何检查Json文件更新,如果更新了,则用更新的数据刷新我的页面
- JQGrid使用服务器编辑后的更新数据刷新数据
- 如何使用新的JSON数据刷新jsTree
- jQueryAJAX将数据重新加载到DOM中,或者使用新数据刷新DOM
- 插入数据并用新数据刷新数据网格后,关闭弹出窗口
- 正在删除数据(刷新)WebGL Globe
- 使用 ajax 调用使用操作类返回的数据刷新(更新)表的各个行
- 好吗 - 使用 setInterval 进行数据刷新
- 数据表无限 + 自动数据刷新
- 模式未使用新数据刷新
- 聚合物-使用绑定数据刷新模板
- Angular如何知道应该重新应用绑定来用更新的数据刷新UI元素
- 连续添加|更新|将数据库中的数据刷新到页面而不回发
- 使用服务器端数据刷新gridx
- 在数据刷新后保留最后的Flot十字准线和图例数据
- 如何用新数据刷新剑道网格
- Ng-Grid将在数据刷新后折叠行,如何防止这种情况
- 当数据刷新时,jQuery UI手风琴不工作
- 如何在ajax网格中使用数据刷新作为触发器
- 如何在AngularJs中保持页面上的数据刷新