Kendo UI Uncaught Error: Invalid Template:'

Question

使用 kendo ui 和运行创建模板时出现以下错误，我不完全确定我做错了什么。

JS调用：

var jsTemplate = kendo.template($('#articlesTmp').html());

错误：

Uncaught Error: Invalid template:'
<div class="row align-items-center portal_item d-flex flex-column flex-md-row">
    <div class="col-6 col-md-1 text-center p-2">
        <div class="product_icon"><img src="#:TypeImage#" alt="#:Type# icon"></div><div class="product_label">#:Type#</div>
    </div>
    <div class="col-12 col-md-9">
        <div class="content_information">
            <span class="date pr-1">#:Date#</span>|<span class="topic pl-1">#:SecondaryTaxonomy#</span>
            #if(Author !== undefined && Author !== null) {#
                <br />
                <span class="author">By <a href="\#" target="_blank">#:Author#</a>, #:AuthorTitle#</span>
            #}

            #if(SubType !== undefined && SubType !== null) {#
                <br />
                <span class="sub-content-type">#:SubType#</span>
            #}
        </div>
        <h3 class="portal_content_title"><a href="#:Url#">#:Title#</a></h3>
        <p class="content_description">#:Description#</p>
    </div>
    <div class="col-12 col-md-2 text-right">
        #if(IsLoggedIn === true) {#
            #if(HasAccess === true) {#
                <a href="#:Url#" class="btn btn-default btn-block" role="button">Read More</a><br>
            #} else {#
                <p style="line-height: 20px;"><i class="fas fa-lock mr-1"></i>Test</p>
            #}
        #}
    </div>
</div>

<div class="grey_divide"></div>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n    <div class="row align-items-center portal_item d-flex flex-column flex-md-row">\n        <div class="col-6 col-md-1 text-center p-2">\n            <div class="product_icon"><img src="'+$kendoHtmlEncode(TypeImage)+'" alt="'+$kendoHtmlEncode(Type)+' icon"></div><div class="product_label">'+$kendoHtmlEncode(Type)+'</div>\n        </div>\n        <div class="col-12 col-md-9">\n            <div class="content_information">\n                <span class="date pr-1">'+$kendoHtmlEncode(Date)+'</span>|<span class="topic pl-1">'+$kendoHtmlEncode(SecondaryTaxonomy)+'</span>\n                ';if(Author !== undefined && Author !== null) {;$kendoOutput+='\n                    <br />\n                    <span class="author">By <a href="\#" target="_blank">'+$kendoHtmlEncode(Author)+'</a>, '+$kendoHtmlEncode(AuthorTitle)+'</span>\n                ';}

            ;$kendoOutput+='if(SubType !== undefined && SubType !== null) {';
                <br />
                <span class="sub-content-type">;$kendoOutput+=':SubType';</span>
            ;$kendoOutput+='}\n            </div>\n            <h3 class="portal_content_title"><a href="'+$kendoHtmlEncode(Url)+'">'+$kendoHtmlEncode(Title)+'</a></h3>\n            <p class="content_description">'+$kendoHtmlEncode(Description)+'</p>\n        </div>\n        <div class="col-12 col-md-2 text-right">\n            ';if(IsLoggedIn === true) {;$kendoOutput+='\n                ';if(HasAccess === true) {;$kendoOutput+='\n                    <a href="'+$kendoHtmlEncode(Url)+'" class="btn btn-default btn-block" role="button">Read More</a><br>\n                ';} else {;$kendoOutput+='\n                    <p style="line-height: 20px;"><i class="fas fa-lock mr-1"></i>Test</p>\n                ';}
        ;$kendoOutput+='}\n        </div>\n    </div>\n\n    <div class="grey_divide"></div>\n';}return $kendoOutput;'
at Object.compile (ScriptResource.axd?d=XMGO4ERtq-tq-0o5XW3_aBWbn_6Q-EkV7jtI-z27Wlzp0jZt3V5zD7D2y08OYMNDSg-_Fl__VZnGQl2aXsLrNm5FZSSv6Lq4bJsxBN3PrYjsYnFM-v-M_07slDRpd54EcvJ2td2TYGn9SzxgUUzcPETnVvA1vuEzFg747lz3OBxRpYEGgFIuA85eN6hXXBTo0&t=1f7ae5e:25)
at Object.i [as template] (jquery.min.js:2)
at HTMLDocument.<anonymous> (insights:79)
at l (jquery.min.js:2)
at c (jquery.min.js:2)

模板代码：

<script id="articlesTmp" type="text/x-kendo-template">
<div class="row align-items-center portal_item d-flex flex-column flex-md-row">
    <div class="col-6 col-md-1 text-center p-2">
        <div class="product_icon"><img src="#:TypeImage#" alt="#:Type# icon"></div><div class="product_label">#:Type#</div>
    </div>
    <div class="col-12 col-md-9">
        <div class="content_information">
            <span class="date pr-1">#:Date#</span>|<span class="topic pl-1">#:SecondaryTaxonomy#</span>
            #if(Author !== undefined && Author !== null) {#
                <br />
                <span class="author">By <a href="\#" target="_blank">#:Author#</a>, #:AuthorTitle#</span>
            #}

            #if(SubType !== undefined && SubType !== null) {#
                <br />
                <span class="sub-content-type">#:SubType#</span>
            #}
        </div>
        <h3 class="portal_content_title"><a href="#:Url#">#:Title#</a></h3>
        <p class="content_description">#:Description#</p>
    </div>
    <div class="col-12 col-md-2 text-right">
        #if(IsLoggedIn === true) {#
            #if(HasAccess === true) {#
                <a href="#:Url#" class="btn btn-default btn-block" role="button">Read More</a><br>
            #} else {#
                <p style="line-height: 20px;"><i class="fas fa-lock mr-1"></i>Test</p>
            #}
        #}
    </div>
</div>

<div class="grey_divide"></div>

最初的想法是我没有正确地转义 # 但我已经尝试了 \\ 和 \，但都没有成功。看到一些建议删除所有空格的帖子，但还没有尝试过。

Answer 1

你需要用#}#而不是#}来结束你的if语句

例如

 #if(SubType !== undefined && SubType !== null) {#
                <br />
                <span class="sub-content-type">#:SubType#</span>
            #}#

或者如果使用 if/else

 #if (myexpression) {# 
    do this
 #} else {#
    do that
 #}#

Kendo UI Uncaught Error: Invalid Template:'

Kendo UI Uncaught Error: Invalid Template:'

kendo-ui

kendo-asp.net-mvc