Question

我是Knockout.js的新手。以下是我的问题：

为主要和扩展过滤器显示的列表项应仅显示相关项。他们不应该显示空白的物品，附上图片。

    <script type="text/x-jquery-tmpl" id="primaryFilterItem">    
    <li class="filterItem not-draggable" data-bind="if:isPrimary, css:{selected:hasFocus, draggable:!isStatic}, click:$root.selectFilter">
        <span data-bind="text:name" />
        <div class="removeButton button" data-bind="click:$root.removeFilter" title='@Html.T("Common.Remove.Tooltip","remove")'></div>
        <span class="priority" data-bind="text:linkboxPriority, css:{hidden:linkboxPriority()==0}"></span>
    </li>    
</script>

<script type="text/x-jquery-tmpl" id="extendedFilterItem">    
    <li class="filterItem not-draggable" data-bind="ifnot:isPrimary, css:{selected:hasFocus, draggable:!isStatic}, click:$root.selectFilter">
        <span data-bind="text:name" />
        <div class="addButton" data-bind="click:$root.addToPrimaryFilter" title='@Html.T("Common.Add.Tooltip","add")'></div>
        <span class="priority" data-bind="text:linkboxPriority, css:{hidden:linkboxPriority()==0}"></span>
    </li>    
</script>


<div class="guiFilter">
    <div class="left">
        <h3 data-bind="if:(3==3 && selectedGuiFilters()!=null && selectedGuiFilters().length>0)">
            @Html.T("Admin.Filter.Sortable.Used.Text", "used filter")
        </h3>
        @*<h3 data-bind="if:selectedGuiFilters().length==0">no filters used</h3>*@
        <h4 data-bind="if:(3==3 && selectedGuiFilters()!=null && selectedGuiFilters().length>0)">
            @Html.T("Admin.Filter.Primary.Text", "Primary filter")
        </h4>
        <ol class="listView" data-bind="sortable:{template:'primaryFilterItem', data:selectedGuiFilters,options: { axis: 'y'}, afterMove:invalidate}"></ol>

        <h4 data-bind="if:(3==3 && selectedGuiFilters()!=null && selectedGuiFilters().length>0)">
            @Html.T("Admin.Filter.Extended.Text", "Extended filter")
        </h4>
        <ol class="listView" data-bind="sortable:{template:'extendedFilterItem', data:selectedGuiFilters,options: { axis: 'y'}, afterMove:invalidate}"></ol>

        @*<ol class="listView" data-bind="sortable:{template:'filterItem', data:selectedGuiFilters,options: { axis: 'y'}, afterMove:invalidate}"></ol>*@
        <ol class="listView" data-bind="template:{name:'filterItem', foreach:specialFilters}"></ol>

        <h3 data-bind="if:(unselectedGuiFilters()!=null && unselectedGuiFilters().length>0)">
            @Html.T("Admin.Filter.Sortable.Available.Text", "available filter")
        </h3>
        <ol class="listView" data-bind="template:{name:'unselectedfilterItem', foreach:unselectedGuiFilters}"></ol>
    </div>

    <div class="right" data-bind="template:{name: selectedType()+'Template', data:selectedFilter}">
    </div>
</div>

Answer 1

从您的问题和代码示例中，您的确切问题并不完全清楚。我在这里假设您正在使用if：IsPrimary作为是否显示li的逻辑，并且您正在将空的li渲染到您的视图中，这就是问题所在。

应用于li的if绑定将影响元素的后代。在这种情况下，您的跨度等。这就是您在视图中呈现空li元素的原因。

来自Knockout文档http://knockoutjs.com/documentation/if-binding.html

但是，if绑定会物理地添加或删除DOM中包含的标记，并且只有在表达式为真时才对后代应用绑定。

在这种情况下，尝试将if绑定移动到li标签之外的无容器绑定。

<h3>This will display empty list items</h3>
<ul data-bind="foreach: ListItems">
  <li data-bind="if: ShowListItem">
    <span data-bind="text: $index"></span>
  </li>
</ul>
<h3>This won't display empty list items</h3>
<ul data-bind="foreach: ListItems">
  <!-- ko if: ShowListItem -->
  <li>
    <span data-bind="text: $index"></span>
  </li>
  <!-- /ko -->
</ul>

请参阅此处的工作示例http://plnkr.co/edit/eZe2mhXiemGbB4eDYJSy?p=preview

Knockout.js：<li>未在模板中显示

1 个答案: