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以某种方式“忽略”<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“跳过”元素？

1 个答案: