css - Knockout.js & Bootstrap 3 - 面包屑伪元素

Question

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

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

Mode 1 / Mode 2

但是我得到:

/模式一/模式二

相关的 knockout 代码为:

<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

不要使用“可见”绑定(bind)，即使元素隐藏，分隔符也会显示。使用“if”和“ifnot”绑定(bind):

<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>