我已经创建了一个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">«</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">»</span>
</a>
</li>
</ul>
</nav>
<!-- ko if: $root.title -->
</div>
</div>
<!-- /ko -->
但是结果不正确。如果我将条件转换为
ifnot: $parent.title
,它将正确隐藏。带有
if: $parent.title
的结果有什么建议么?
最佳答案
因此,似乎 knockout 无容器控件语法需要有效的HTML语法才能正常工作。因此,由于我在包装div标签时没有关闭div标签,因此可以理解,它引发了摇摆。
我刚想出的解决方案是使用CSS绑定(bind),如果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'}">
不漂亮,但是比复制标记好看得多。