Knockout.js 和 Bootstrap 3 - 面包屑伪元素答案

【问题标题】：Knockout.js & Bootstrap 3 - Bread Crumb Pseudo ElementKnockout.js 和 Bootstrap 3 - 面包屑伪元素
【发布时间】：2013-11-21 15:31:00
【问题描述】：

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

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

Mode 1 / Mode 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

【问题讨论】：

标签： css twitter-bootstrap knockout.js

【解决方案1】：

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

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

【讨论】：

感谢您的意见。我也试过这个。似乎这也设置了 display: none;它不起作用。

【解决方案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: 绑定仅根据其评估呈现 SUB 元素.....始终呈现包含 if/ifnot 绑定的元素。

【讨论】：