html - 阅读 HTML 列表时，如何使 Kendo UI 面板栏“跳过”一个元素？

Question

我正在使用 Knockout.js 3.3 并使用带有自定义元素的组件。我正在尝试将 Kendo UIPanelbar与该列表一起使用。唯一的问题是，它失败了（嵌套<ul>不会展开），因为我的列表格式如下：

<ul>
    <sidebar-step>
        <li>some message
            <ul>
                <li>some sub message<li>
                <li>another sub message</li>
            <ul>
        </li>
    </sidebar-step>
</ul>

<sidebar-step>是一个自定义元素，其中包含一个模板<li>和一个子列表。我猜因为<sidebar-step>不是 的通常子元素<ul>，所以它会导致它搞砸。

有没有办法让 Kendo UI 以某种方式“忽略”<sidebar-step>标签？

编辑：如果不可能，我该怎么做才能使列表可扩展（即使使用此自定义元素）？

Answer 1

在外部使用组件绑定<li>而不是创建自定义标记。

一个最小的例子：

<ul>
    <li data-bind="component:'sublist'"></li>
</ul>

脚本：

ko.components.register('sublist', {
    viewModel: function(params) {
        this.text = 'something';
        this.subtext = ['one','two'];
    },
    template: '<!-- ko text:text --><!-- /ko --><ul data-bind="foreach:subtext"><li data-bind="text:$data"></li></ul>'
});

ko.applyBindings();

演示：http: //jsfiddle.net/Lohfscdg/