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

【问题标题】：Kendo DropDownList Template with Blank Item带有空白项的剑道下拉列表模板
【发布时间】：2014-06-19 17:56:47
【问题描述】：

我正在尝试使用 Kendo DropDownList 并在列表顶部提供一个空白项，以及使用模板提供多个列。

   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");

以上产生

未捕获的 ReferenceError：未定义 TicketTypeDescription

如果我没有在下面指定 optionLabel，则下拉菜单可以正常工作（没有空项目）。

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

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

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

【问题讨论】：

标签： kendo-ui multiple-columns kendo-dropdown

【解决方案1】：

根据 Telerik 的回复：

问题出在 optionLabel 不知道关于数据对象的其他属性。所以你需要设置一些值，甚至是空值，才能正常工作。

所以，optionLabel 需要指定如下：

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

【讨论】：

【解决方案2】：

你很接近；但是使用# 符号来tell Kendo where javascript and their template 语法开始和结束。试试这个：

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

# 让您可以在 html 中散布 javascript。此外，#: 会自动对内容进行 html 编码，以防万一这对您很重要。否则，您可以使用#= 获得相同的结果。

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

【讨论】：

【解决方案3】：

你可以试试#: data && data.TicketTypeDescription #

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

【讨论】：