Question

我遇到了一个有趣的错误。当CSS元素的关联元素在Bootstrap 3.0.2的痕迹导航组件中具有display: none;时，不会消失。 jsFiddle要测试：尝试将视图模型中的模式从“模式1”切换到“模式2”。

我有一个使用knockout.js构建的痕迹链接。我使用嵌套li绑定切换纯li或a与嵌套visible: onSomeCondition的可见性。我的理解是，不可见的li设置为display: none;。但是，这不会删除DOM中关联的li，我认为这会使CSS保留伪元素。例如，我期待以下内容：

Mode 1 / Mode 2

但我明白了：

/模式1 /模式2

相关的淘汰赛代码是：

<ol class="breadcrumb">
    <li data-bind="visible: isInMode1()">
        <a href="#">Mode 1</a>
    </li>
    <li class="active" data-bind="visible: !isInMode1()">Mode 1</li>
    <li data-bind="visible: isInMode2()">
        <a href="#">Mode 2</a>
    </li>
    <li class="active" data-bind="visible: !isInMode2()">Mode 2</li>
</ol>

相关的Bootstrap 3.0.2 CSS如下所示。基于Bootstrap样式表，“/”字符被添加为伪“before”元素。

.breadcrumb {
  padding: 8px 15px;
  margin-bottom: 20px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.breadcrumb > li {
  display: inline-block;
}

.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #cccccc;
  content: "/\00a0";
}

.breadcrumb > .active {
  color: #999999;
}

如果有更好的方法，或者我没有想到的跨浏览器解决方案，我将不胜感激任何意见。我宁愿不破解CSS，但这可能是更清洁的解决方案。

谢谢

快速链接：

Bootstrap 3.0.2 Breadcrumbs

Knockout.js visible binding documentation

Answer 1

不要使用“可见”绑定，即使元素被隐藏，分隔符也会显示。使用“if”和“ifnot”bindngs：

<ol class="breadcrumb">
  <li data-bind="if:isInMode1()">
      <a href="#">Mode 1</a>
  </li>
  <li class="active" data-bind="ifnot:isInMode1()">Mode 1</li>
  <li data-bind="if:isInMode2()">
    <a href="#">Mode 2</a>
  </li>
  <li class="active" data-bind="ifnot:isInMode2()">Mode 2</li>
</ol>

Answer 2

为了完整起见，并且因为我很少找到一个我可以回答的问题，但这个问题还没有一个明确的答案......这就是该怎么做：

<ol class="breadcrumb" data-bind="foreach: contentModel.breadcrumbs">
        <!-- ko if: isInMode1($data) -->
        <li data-bind="css: cssClass">
            <a href="#" data-bind="text: displayName, click: $root.GetContent"></a>
        </li>
        <!-- /ko -->
        <!-- ko ifnot: isInMode1($data) -->
        <li data-bind="css: cssClass, text: displayName"></li>
        <!-- /ko -->
        ...repeat for isInMode2.......
    </ol>

if：和ifnot：bindings仅根据其评估呈现SUB元素.....始终呈现包含if / ifnot绑定的元素。

Knockout.js＆amp; Bootstrap 3 - 面包屑伪元素

2 个答案: