【发布时间】：2012-06-17 19:32:08
【问题描述】：
免责声明：最初是 posted 发给 KendoUI 论坛的，但没有收到任何答复。
我正在尝试在我的 ListView 模板中使用条件格式的元素。这个局部视图使用一个共享的 DataSource 来允许通过 Pager、一个两卡 ListView 和前面提到的模板进行导航。下面是相关的模板代码：
<script id="contact-template" type="text/x-kendo-template">
<div id="ContactCard" class="IsActive${IsActive}">
#if (Salutation === null || Salutation === '') {#<h4>#}else{#<h4>#=Salutation# #}##=FirstName# #=LastName#</h4>
#if (Title === null || Title === '') {##}else{#<p>#=Title#</p>#}#
<br />
#if (Email == 0 || Email === '') {##}else{#<p><a href='mailto:#=LastName#,%20#=FirstName#%20<#=Email#>'>#=Email#</a></p>#}#
#if (Phone === null || Phone === '') {##}else{#<p>#=Phone##if (Extension === null || Extension === '') {#</p>#}else{# ext. #=Extension#</p>#}##}#
</div>
我尝试了几种不同的方法来生成这段代码，包括一个简单的 if 和 if (Salutation != null && Salutation != '') 这样的反向检查，但无济于事。我想我错过了一些关于如何从#if 部分引用数据源数据的内容？我尝试了if (#=Salutation# != null && #=Salutation# != '') 之类的方法，但这引发了错误的模板错误。
这是输出：
注意：忽略可怕的格式。这是预造型。
这是整个文件，供参考：
@model int @* accountId *@
<article id="contactArticle">
<div id="contactList"></div>
<footer><span id="pagerTotal"></span><a href="#" class="k-link" id="pageLeft" onclick="pageLeftOne()"><</a><div id="pager"></div><a href="#" class="k-link" id="pageRight" onclick="pageRightOne()">></a></footer>
</article>
<script id="contact-template" type="text/x-kendo-template">
<div id="ContactCard" class="IsActive${IsActive}">
#if (Salutation === null || Salutation === '') {#<h4>#}else{#<h4>#=Salutation# #}##=FirstName# #=LastName#</h4>
#if (Title === null || Title === '') {##}else{#<p>#=Title#</p>#}#
<br />
#if (Email == 0 || Email === '') {##}else{#<p><a href='mailto:#=LastName#,%20#=FirstName#%20<#=Email#>'>#=Email#</a></p>#}#
#if (Phone === null || Phone === '') {##}else{#<p>#=Phone##if (Extension === null || Extension === '') {#</p>#}else{# ext. #=Extension#</p>#}##}#
</div>
</script>
<script type="text/javascript">
var currentPage = 1;
var pages;
var contactDataSource;
//SNIP//
$(document).ready(function() {
var init = 1;
contactDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '@Url.Action("ContactPager", "Contact")',
dataType: "json",
type: "POST",
timeout: 2000,
data: {
accountId: @Model
}
}
},
schema: {
data: "data",
total: "total",
type: "json",
model: {
fields: {
Id: { type: "string"},
FirstName: { type: "string" },
LastName: { type: "string"},
Title: { type: "string", defaultValue: ''},
Salutation: { type: "string", defaultValue: ''},
Extension: { type: "string", defaultValue: ''},
Phone: { type: "string", defaultValue: ''},
Email: { type: "string", defaultValue: ''},
IsActive: {type: "boolean"} //,
//ReceivesDistributionEmails: {type: "boolean"}
}
}
},
pageSize: 2
});
contactDataSource.read();
contactDataSource.bind("change", function(e) {
if (init) {
init = 0;
if (contactDataSource.total() < 1) {
//SNIP
} else {
$("#pager").kendoPager({
dataSource: contactDataSource,
buttonCount: 5
});
//SNIP//
pages = $("#pager").data("kendoPager").dataSource.totalPages();
$("#contactList").kendoListView({
dataSource: contactDataSource,
pageable: true,
template: kendo.template($("#contact-template").html())
});
kendo.init($("#contactList"));
}
}
});
});
</script>
TL;DR：我如何获得一个 Kendo 模板来根据数据源成员的值构建它的内容？
【问题讨论】：
-
模板的输出有什么问题？这是编写模板表达式的有用链接：demos.kendoui.com/web/templates/expressions.html
-
我在编写代码时仔细研究了该操作指南，尤其是“在模板定义中使用 JavaScript 代码”部分。我以为我用对了……但是，我的输出仍然显示空值，而不是跳过这些字段。
-
看起来#=Title# 的评估是文字字符串'null'，因此您需要将其评估为字符串值。看看我刚刚发布的答案。