asp.net-mvc-4 – Kendo模板条件格式化

免责声明：原来是 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(Salutation！= null&&& Salutation！=”)，但无效。我想我缺少一些关于如何从#if部分引用DataSource的数据？我尝试像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",Extension: { type: "string",Phone: { type: "string",Email: { type: "string",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模板，根据数据源成员的价值构建内容？

解决方法

尝试用单引号将null括起来：

...
#if (Title != 'null' && Title != '')  { #
     <p>#=Title# </p> 
# } #
...

这个符号可以用作一个替代方案，尽管标签被遗留下来。它可以根据您想要实现的格式工作。

<p>${ Title != 'null' && Title != '' ? Title : ''} </p>