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

Question

我的目标是创建一个具有嵌套级别的简单导航下拉菜单 (like this)。我想为此使用一个可观察对象(除非有更好的解决方案)。

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 Menu 是否合适。我需要每个导航项来加载基于几个模板的 View 。因此，我将在每个菜单项上设置一个 data-tmpl-type 属性，以便应用知道要加载哪个模板。我还需要一个 data-view 属性来知道将哪个 View 加载到每个模板中……如果这有意义的话。

我还没有找到使用 Kendo 菜单执行此操作的方法。

Answer 1

看看你的另一个问题，我假设你希望你的菜单根据你的数据数组中可能改变的属性而改变。

您可以通过使用您拥有的数据结构作为 kendoMenu 的数据源来执行类似的操作，并通过使用数据创建分层数据源来对更改使用react。

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/

编辑:不确定我是否完全理解这些要求，但这里有一些可能值得考虑的选项:

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