在读取 HTML 列表时，如何使 Kendo UI Panelbar "skip" 成为一个元素？

Question

我正在使用 Knockout.js 3.3 并使用带有自定义元素的组件。我正在尝试对该列表使用 Kendo UI 的 Panelbar。唯一的问题是，它失败了（嵌套的 <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 以某种方式 "ignore" 成为 <sidebar-step> 标签？

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

Answer 1

在外部 <li> 使用 component binding 而不是创建自定义标签。

一个最小的例子：

<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/

在读取 HTML 列表时，如何使 Kendo UI Panelbar "skip" 成为一个元素？

How can I make Kendo UI Panelbar "skip" an element when reading an HTML list?

html

knockout.js

kendo-ui

kendo-panelbar