Question

我有这个模板：

<script id="tmpl_bound_menuitem" type="text/x-kendo-template">
    <li data-bind="attr: { class: style }">
        <a data-bind="attr: { href: href }, text: name"></a>
    </li>
</script>

View使用它从menuModel：

创建菜单项

<ul class="dropdown-menu" data-bind="source: menu_test" data-template="tmpl_bound_menuitem"></ul>

这很好用。但是，如果我设置这些数据：

menuModel.set("menu_test", [
    { name: "MenuItem1", href:"#/route1" },
    { name: "",         style: "divider" }
]);

结果具有未定义的值，如预期的那样：

<ul class="dropdown-menu" data-bind="source: menu_test" data-template="tmpl_bound_menuitem">
    <li class="undefined" data-bind="attr: { class: style }">
        <a data-bind="attr: { href: href }, text: name" href="#/route1">MenuItem1</a>
    </li>
    <li class="divider" data-bind="attr: { class: style }">
        <a data-bind="attr: { href: href }, text: name" href="undefined"></a>
    </li>
</ul>

现在，问题是：是否可以使此模板适用于不同类型的菜单项？

类似“普通”模板中的javascript代码：

# if(href) { #<a data-bind="attr: { href: href }, text: name"></a># } #

但这不起作用，因为href未定义。

Answer 1

是的，您可以使用条件。

如果您编写if (href)...，则需要定义href，否则JavaScript将无法找到它。所以，相反，你应该写的是：

# if(data.href) { #<a data-bind="attr: { href: href }, text: name"></a># } #

其中data是KendoUI自动生成的包含对象模型的变量。

Kendo UI允许快捷方式href，因为在JavaScript代码中它们具有以下内容：

with (data) {
   // Code for expanding your template
   ...
}

但这需要href，否则模板扩展无法确定href是全局变量还是数据成员。

kendo UI：我可以在绑定模板中使用条件吗？

1 个答案: