带有空白项的剑道下拉列表模板

Question

我试图使用剑道下拉列表，并在列表顶部提供一个空白项，以及使用模板提供多个列。

   var ticketType = $("#TicketType").kendoDropDownList
({

    dataTextField: "TicketTypeName",
    dataValueField: "TicketTypeId",
    optionLabel: " ", //This should add a blank item, but errors out instead.
    dataSource:
    {
        serverFiltering: true,
        type: "jsonp",
        transport:
        {
            read:
            {
                url: "../Service/IncidentManagement.asmx/GetTicketTypeList",
                contentType: "application/json; charset=utf-8",
                type: "POST"
            }
        },
        schema:
        {
            data: "d"
        }
    },
    template: "<div><span>${TicketTypeName}</span><span>${TicketTypeDescription}</span></div>"
}).data("kendoDropDownList");

以上产生

未捕获引用错误：未定义TicketType描述

如果我没有下面指定的optionLabel，则下拉列表可以正常工作（没有空项）。

如果指定了optionLabel并删除了template选项，那么它可以正常工作（没有多列）。

是否有某种方法可以检查它是否在模板中未定义？大致如下：

<span>${TicketTypeDescription} !== undefined ? ${TicketTypeDescription} : '' </span>

Answer 1

你可以试试#：数据

也不要使用${}语法，它已被弃用。

Answer 2

你很接近；但是使用#符号告诉剑道javascript及其模板语法的开始和结束位置。试试这个：

# if (TicketTypeDescription !== undefined) { #
    <span>&nbsp;</span>
# } else { #
    <span>#: TicketTypeDescription #</span>
# } #

#可以让你在html中穿插javascript。此外，#：自动HTML编码的内容，只是在这是重要的你。否则，您可以对相同的结果使用#=。

此外，显然您不需要span元素，但如果您想以某种方式装饰或样式化所包含的值，它们会很有帮助。

Answer 3

根据Telerik的回复：

问题来自optionLabel不知道数据对象的其他属性。因此，您需要设置一些值，即使是空的，以便正确工作。

因此，optionLabel需要指定如下：

optionLabel: {
          TicketTypeName: " ",
          TicketTypeId: "",
          TicketTypeDescription: ""
        }