javascript - 如果满足条件，KnockoutJS 隐藏包装 HTML

Question

我已经创建了一个 gridview 组件，如果用户提供一个标题作为参数，我希望它被包装在一个 Bootstrap 面板中。我真的不想复制我的标记，所以我尝试使用无容器控件语法来防止将面板 HTML 添加到 DOM。

这是我的尝试:

<!-- ko if: $root.title-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title" data-bind="text: $root.title"></h3>
    </div>
    <div class="panel-body">
<!-- /ko -->
        <table class="table table-striped">
            <thead>
            <tr data-bind="foreach: columns">
                <th data-bind="text: headerText"></th>
            </tr>
            </thead>
            <tbody data-bind="foreach: itemsOnCurrentPage">
            <tr data-bind="foreach: $parent.columns">
                <td data-bind="html: typeof rowText == 'function' ? rowText($parent) : $parent[rowText]"></td>
            </tr>
            </tbody>
        </table>
        <nav data-bind="visible: maxPageIndex() > 0">
            <ul class="pagination">
                <li data-bind="click: previousPage">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <!-- ko foreach: ko.utils.range(0, maxPageIndex) -->
                <li data-bind="css: { active: $data == $parent.currentPageIndex }, click: function(){$parent.updateCurrentPageIndex($data)}">
                    <a href="#" data-bind="text: $data + 1"></a>
                </li>
                <!-- /ko -->
                <li data-bind="click: nextPage">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
 <!-- ko if: $root.title -->
    </div>
</div>
<!-- /ko -->

但是结果不正确。如果我将条件反转为 ifnot: $parent.title 它会正确隐藏。

结果为 if: $parent.title

有什么建议吗？

Answer 1

因此，knockouts 无容器控件语法似乎需要有效的 HTML 语法才能正常工作。因此，由于我在包装它时没有关闭 div 标签，所以它会产生一个摇摆不定的情况，这是可以理解的。

我刚刚提出的解决方案是使用 CSS 绑定(bind)，如果 typeof $root.title，则删除 panel 和 panel-default 类=== '未定义'

解决方案

<div class="panel panel-default" data-bind="css:{'panel panel-default': typeof $root.title !== 'undefined'}">
    <div class="panel-heading">
        <h3 class="panel-title" data-bind="text: $root.title"></h3>
    </div>
    <div class="panel-body" data-bind="css:{'panel-body': typeof $root.title !== 'undefined'}">

虽然不漂亮，但比复制标记漂亮得多。