Question

我的目标是创建一个包含嵌套级别（like this）的简单导航下拉菜单。而且我想使用一个observable（除非有更好的解决方案）。

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>

有没有办法用模板做到这一点。也许使用嵌套模板或Kendo hierarchical datasource和hasChildren或其他东西？

这与previous SO question I posted非常相似，但我不再使用Knockout了。

要实现这一目标的任何想法吗？

修改

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

我还没想办法用剑道菜单做这个。

Answer 1

查看您的其他问题，我假设您希望根据数据阵列中可能更改的属性更改菜单。

您可以使用您拥有的数据结构作为kendoMenu的数据源来执行此类操作，并通过创建包含数据的分层数据源来对更改做出反应。

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

请参阅此处的工作示例：http://jsfiddle.net/lhoeppner/6B6cg/

编辑：不确定我是否完全理解这些要求，但这里还有一些值得考虑的选择：

请查看本教程，了解包含模板的菜单小部件：http://docs.kendoui.com/tutorials/ASP.NET/Kendo%20Music%20Store/Music%20Store%20Web/kendo-music-store-web-cart-menu-widget
在您的商品上使用'encoded：false'，以便将“text”属性解释为HTML - 然后您可以添加自定义属性
编写一个遍历数据结构的递归函数，并使用您需要的任何内容写入无序列表;正如您可以看到in this example，您可以将任何类型的HTML放入项目

Answer 2

你正在寻找的是什么Kendo Menu小部件非常相似（确切？）。你有没看过它？

您是否检查了this演示？

使用嵌套/多维度可观察的剑道模板

2 个答案: