我已经创建了一个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的结果
javascript - KnockoutJS如果满足条件,则隐藏包装HTML-LMLPHP

有什么建议么?

最佳答案

因此,似乎 knockout 无容器控件语法需要有效的HTML语法才能正常工作。因此,由于我在包装div标签时没有关闭div标签,因此可以理解,它引发了摇摆。

我刚想出的解决方案是使用CSS绑定(bind),如果panel,则删除panel-defaulttypeof $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'}">

不漂亮,但是比复制标记好看得多。

09-10 11:20
查看更多