当数据来自服务时,如何正确呈现Kendo UI PanelBar
How to properly render a Kendo UI PanelBar when data is from a service?
在控制器中使用AngularJS调用服务。此服务被推迟,并且在某个时间接收数据。
angular.module("app").controller("dataController", ["$filter", "service"],
function ($filter, service) {
var vm = this;
vm.panelBarOptions = {
expandMode: "single"
};
service.execute({
// some options to call API and get data
}).then(function (data) {
vm.data = data;
});
}
);
从服务接收到的数据类似于这种硬编码数据:
var hardCodedData = [
{
title: "some title1",
subtitles: [
{ subtitle: "subtitle 1.1" },
{ subtitle: "subtitle 1.2" }
]
},
{
title: "some title2",
subtitles: [
{ subtitle: "subtitle 2.1" },
{ subtitle: "subtitle 2.2" },
]
}
];
接下来,是用于显示此数据的HTML模板:
<ul kendo-panel-bar k-options="dataController.panelBarOptions">
<li ng-repeat="item in dataController.data">
{{ item.title }}
<ul>
<li ng-repeat="subitem in item.subtitles">{{ subitem.subtitle }}</li>
</ul>
</li>
</ul>
通过双向数据绑定,数据可以成功地显示在模板中的浏览器中。但是,Kendo PanelBar的渲染不正确。我在控制器中使用硬编码数据(在本例中为hardCodedData)进行了一个小测试,使用与服务提供的数据相同的结构和属性。使用硬编码数据,PanelBar将正确呈现。
因此,我假设Kendo UI(使用其Angular指令)渲染PanelBar,然后接收数据,更改DOM,然后样式就不会应用于PanelBar。
我可能做错了。那么,这里缺少什么?也许我应该在成功接收到数据后重新呈现PanelBar,但如何呢?让它成为指令?
不幸的是,一旦初始化小部件,就无法使用ng-repeat
。您可以做的一件事是使用PanelBar的dataSource
选项和k-rebind
属性(每当数据更改时,它会自动重建小部件)。以下是一个例子:http://dojo.telerik.com/@tjvantoll/oHaC。
我不知道这是否是一个好答案,因为这与Kendo UI PanelBar无关。相反,我使用的是UI Bootstrap Accordeon指令。当刷新绑定数据时,我可以使用ng-repeat
并进行更新,而不会出现任何问题。
有关更多详细信息和示例:http://angular-ui.github.io/bootstrap/.
相关文章:
- React重新渲染但未显示正确的组件
- 我的jQuery插件参数没有正确启动,遇到了问题
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- Amazon S3 REST API大小不正确
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- Javascript Reg Exp不正确匹配
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- Javascript计数器变量未显示正确的值
- MeteorJS:在带有回调的vzaar api上正确使用wrapAsync
- Meteor方法在客户端返回null,在客户端运行的相同方法返回正确的值
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- DIV并排,位置不正确
- 从查询字符串参数推断出正确的数据类型
- 我能得到正确的格式吗
- 仅在IE中,javascript中的时区名称不正确
- 如何正确使用jsPDF
- JavaScript代码未正确检查ajax请求
- 将 json 正确绑定到 Kendo DropDownList
- Kendo Grid内部的jQuery.on()输入字段绑定不正确
- 当数据来自服务时,如何正确呈现Kendo UI PanelBar