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

所以似乎敲门容器控制语法需要有效的HTML语法才能正常工作。所以，因为当我把它包裹起来时我没有关闭div标签，所以可以理解地抛出一个摇摆器。

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

，则删除panel-default和typeof $root.title === 'undefined'类

<强>解决方案

<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'}">

不漂亮，但它比复制标记更漂亮。

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

1 个答案: