0

我有这个模板：

<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 是未定义的。

4

1 回答 1

0

是的，您可以使用条件。

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

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

dataKendoUI 自动生成的包含您的对象模型的变量在哪里。

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

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

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

于 2014-05-15T04:50:37.673 回答