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

我已经创建了一个gridview组件，如果用户提供一个标题作为参数，我希望它包装在引导面板中。我真的不想复制我的标记，所以我尝试使用无容器控件语法来防止面板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

---

有什么建议吗？

因此，似乎敲除无容器控件语法需要有效的HTML语法才能正常工作。所以，既然我在包装它的时候没有合上div标签，它就会发出抖动，这是可以理解的

我刚刚提出的解决方案是使用CSS绑定，如果

typeof$root.title=='undefined'，则删除
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'}">



不漂亮，但它比复制标记漂亮得多
 如果对css绑定使用一个计算绑定，例如cssPanel=ko.computed（function（）{return（title）-“panel-panel-default”：“；}），则可以使它更美观一点@泉戈：这是一个很好的观点。我想我只是在偷懒，不过我会实现的。非常感谢。