1

我的目标是创建一个带有嵌套级别的简单导航下拉菜单（像这样）。而且我想为它使用一个可观察的（除非有更好的解决方案）。

var menuitems = ko.observable([
    { name: "item1", children: [
        { name: "item1-1", children: []},
        { name: "item1-2", children: []}
    ] },
    { name: "item2", children: [] },
    { name: "item3", children: [
        { name: "item3-1", children: []},
    ] },
    { name: "item4", children: [] }
]);

然后我会使用无序列表来构建导航......

<ul>
    <li>
        <a>item1</a>
        <ul>
            <li><a>item1-1</a></li>
            <li><a>item1-2</a></li>
        </ul>
    </li>
    <li>
        <a>item2</a>
    </li>
    ... etc ...
</ul>

有没有办法用模板做到这一点。也许使用带有 hasChildren 或其他东西的嵌套模板或 Kendo分层数据源？

这与我之前发布的 SO question非常相似，但我不再使用 Knockout。

有什么想法可以做到这一点吗？

编辑：

我不确定剑道菜单是否合适。我需要每个导航项加载基于几个模板的视图。所以我将在每个菜单项上都有一个 data-tmpl-type 属性，以便应用程序知道要加载哪个模板。我还需要一个数据视图属性来知道将哪个视图加载到每个模板中……如果这有意义的话。

我还没有想出用剑道菜单做到这一点的方法。

4

2 回答 2

2

Looking at your other question, I assume you want your menu to change based on attributes that might change in your data array.

You can do something like that by using the data structure you have as a data source for a kendoMenu, and react to changes by also creating a hierarchical data source with the data.

var data = [{
    text: "item1",
    enabled: true,
    items: [{
        text: "item1-1",
        enabled: true,
        items: []
    }, {
        text: "item1-2",
        enabled: true,
        items: []
    }]
}, {
    text: "item2",
    enabled: true,
    items: []
}, {
    text: "item3",
    enabled: true,
    items: [{
        text: "item3-1",
        enabled: true,
        items: []
    }]
}, {
    text: "item4",
    enabled: true,
    items: []
}];

$("#bindme").kendoMenu({
    dataSource: data
});

var dataSource = new kendo.data.HierarchicalDataSource({
    data: data,
    change: function (e) {
        // enable / disable items in the menu
        var changedItem = e.items[0];
        var enabled = changedItem.enabled;
        var text = changedItem.text;
        var menuElem = $("#bindme").find(".k-link:contains(" + text + ")").parent();
        $("#bindme").data("kendoMenu").enable(menuElem, enabled);
    }
});
dataSource.read();

setTimeout(function () {
    dataSource.at(0).set("enabled", false);

}, 3000);

See working example here: http://jsfiddle.net/lhoeppner/6B6cg/

Edit: Not sure I completely understand the requirements, but here are a few more options that might be worth considering:

  1. Take a look at this tutorial for a menu widget with templates: http://docs.kendoui.com/tutorials/ASP.NET/Kendo%20Music%20Store/Music%20Store%20Web/kendo-music-store-web-cart-menu-widget
  2. use 'encoded: false' on your items so that the "text" property is interpreted as HTML - then you could add custom attributes
  3. write a recursive function that traverses your data structure and writes the unordered list with whatever content you need; as you can see in this example, you can put any kind of HTML into the items
于 2013-11-05T18:27:37.040 回答
1

您正在寻找的与Kendo Menu小部件的功能非常相似（确切地说？）。你看过了吗？

你检查了这个演示吗？

于 2013-11-05T17:54:29.790 回答