Template conditional formatting problem

[Jesse]

I'm trying to use conditional formatting of elements in my ListView's template. This partial view uses a shared DataSource to allow navigation via Pager, a two-card ListView, and the aforementioned template. Here's the relevant template code:

<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>

I've tried several different ways of generating this code, including a simple if with inverted checks like

if (Salutation != null && Salutation != '')

 but to no avail. I think I'm missing something about how to reference a DataSource's data from within the #if section? I tried something like

if (#=Salutation# != null && #=Salutation# != '')

but that threw a bad template error.

Here's the output
Note: disregard the horrible formatting. This is pre-styling.

Here's the whole file, for reference:

@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;

     

    function pageLeftOne() {

        currentPage = (currentPage - 1) % pages;

        if (currentPage === 0) {

            currentPage = pages;

        }

        contactDataSource.page(currentPage);

    };

 

    function pageRightOne() {

        currentPage = (currentPage + 1) % pages;

        if (currentPage === 0) {

            currentPage = pages;

        }

        contactDataSource.page(currentPage);

    };   

     

    $(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) {

                    var pager = document.getElementById("pager");

                    pager.parentNode.removeChild(pager);

                    var left = document.getElementById("pageLeft");

                    left.parentNode.removeChild(left);

                    var right = document.getElementById("pageRight");

                    right.parentNode.removeChild(right);

                    var pagerTotal = document.getElementById("pagerTotal");

                    pagerTotal.parentNode.removeChild(pagerTotal);

 

                    var createDiv = document.createElement('div');

                    createDiv.appendChild(

                        document.createTextNode("@Resources.Contact.Contact.NoneFound"));

 

                    var list = document.getElementById("contactList");

                    list.parentNode.replaceChild(createDiv, list);

 

                } else {

                    $("#pager").kendoPager({

                        dataSource: contactDataSource,

                        //selectTemplate: '<li><span class="k-state-active">Contacts: ' + contactDataSource.total() + '   Page #=text# of ' + this.totalPages() + '</span></li>',

                        //linkTemplate: '',

                        buttonCount: 5  //1

                    });

 

                    $("#pagerTotal").text('Contacts: ' + contactDataSource.total());

 

                    pages = $("#pager").data("kendoPager").dataSource.totalPages();

 

                    $("#contactList").kendoListView({

                        dataSource: contactDataSource,

                        pageable: true,

                        template: kendo.template($("#contact-template").html())

                    });

                    kendo.init($("#contactList"));

                }

            }

        });

    });

 

</script>

[Jesse]

So I never got an answer, but I reposted to StackOverflow and a kind person helped out! The solution