剑道移动示例解释- data.HasEmployees
Explanation of kendo-mobile example - data.HasEmployees
我一直在玩剑道移动演示,其中一个例子让我有点难住了。在这个特殊的例子中,有一段javascript
<script id="hierarchicalMobileListViewTemplate" type="text/x-kendo-template">
# if (data.HasEmployees) { #
<h2> #: FullName # </h2>
</a>
# } else { #
<h2> #: FullName # </h2>
# } #
</script>
包含数据。我不确定"数据"部分来自哪里,因为它不是代码中任何地方的变量。
下面是示例http://trykendoui.telerik.com/ufup。如有任何帮助,我将不胜感激。
感谢迈克尔p。S代码被完整复制
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/mobile/listview/hierarchical-databinding.html">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
</head>
<body>
<div data-role="view" data-show="rebindListView" id="hierarchical-view" data-transition="slide">
<header data-role="header">
<div data-role="navbar" id="employee-navbar">
<a data-role="backbutton" id="employee-back" data-align="left">Back</a>
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
</div>
</header>
<ul id="hierarchical-listview" data-role="listview" data-template="hierarchicalMobileListViewTemplate"></ul>
</div>
<script id="hierarchicalMobileListViewTemplate" type="text/x-kendo-template">
# if (data.HasEmployees) { #
<h2> #: FullName # </h2>
</a>
# } else { #
<h2> #: FullName # </h2>
# } #
</script>
<script>
var serviceRoot = "http://demos.telerik.com/kendo-ui/service";
var employees = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: serviceRoot + "/Employees",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
});
function rebindListView(e) {
var parentID = e.view.params.parent,
element = e.view.element,
backButton = element.find('#employee-back'),
listView = element.find("#hierarchical-listview").data('kendoMobileListView'),
navBar = element.find('#employee-navbar').data('kendoMobileNavBar');
if (parentID) {
employees.fetch(function() {
var item = employees.get(parentID);
if (item) {
backButton.show();
navBar.title(item.FullName);
listView.setDataSource(item.children);
} else {
// redirect to root
setTimeout(function() {
kendo.mobile.application.navigate('#hierarchical-view');
}, 0);
}
});
} else {
backButton.hide();
navBar.title('Employees');
listView.setDataSource(employees);
}
e.view.scroller.scrollTo(0, 0);
}
</script>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
data
变量指向传递给模板的可观察对象(在您的示例中是数据源中的数据项)。Kendo UI为模板使用with块;这意味着可观察对象被添加到模板变量被求值的作用域链中;所以你也可以用这个代替:
<script id="hierarchicalMobileListViewTemplate" type="text/x-kendo-template">
# if (HasEmployees) { #
<h1> #: FullName # </h1>
# } else { #
<h2> #: data.FullName # </h2>
# } #
</script>
你可能也想看看这个答案
相关文章:
- Ember Data DS.Model's set函数不起作用
- Extending Ext.data.NodeInterface
- 如何获取$data.Entity的密钥
- jQuery可以't获取data-*属性值,返回undefined
- Query JS Ext.data.Store
- 设置'这'在React with Inverse Data Flow中
- Google Data API上的OOP Javascript回调方法
- 如何获取`data-listid`属性值
- JSTree's data.rslt.obj.text()返回一个文本数组,而不是所需节点的文本
- KOValidation在错误消息中获取可观察值、$index()、$data等
- ko.com在foreach$data变量上添加了write函数
- Javascript、jquery、主干网、splunk:on(“change”、{data}、handler)导致Ty
- 为什么toStaticHTML删除data-*属性
- Javascript Canvas使用getImageData(x,y,1,1).data获取颜色
- 访问HTML中的data-*属性并将其作为道具传递
- jQuery / ajax data container + organization
- 访问通过XHR.onreadystatechange回调中的XHR.send(data)发送的数据
- jQuery.data('itemname')不工作,但jQuery.attr('data it
- jQuery.data()并存储日期信息
- 剑道移动示例解释- data.HasEmployees