淘汰赛不喜欢另一个里面的html标签吗？答案

【问题标题】：Does knockout not like html tag inside another one?淘汰赛不喜欢另一个里面的html标签吗？
【发布时间】：2013-12-19 11:53:59
【问题描述】：

我正在构建一个带有淘汰赛 3.0 的网页。我要做的就是创建一个带有徽章的引导列表，请参见下面的示例和代码

但是，当我像这样在淘汰赛模板绑定中这样做时

<script type="text/html" id="document-template">
    <li class="list-group-item" data-bind="text: Caption">
               <span class="badge" data-bind="text:PageCount"></span>
    </li>
</script>

页面看起来像，没有跨度

如果我像这样将 span 标签移到 li 标签之外

<script type="text/html" id="document-template">
    <li class="list-group-item" data-bind="text: Caption"></li>
    <span class="badge" data-bind="text:PageCount"></span>
</script>

我可以看到我的跨度文本 - 肯定它有错误的 css

我的问题是 1) 淘汰赛不像一个标签内的一个标签吗？或者2）我做错了什么，如果我错了，你能给我一些建议吗？

谢谢

【问题讨论】：

标签： html css twitter-bootstrap web knockout.js

【解决方案1】：

它正在用文本绑定覆盖你的 LI 元素的内容。只需在您的 LI 中放置两个 span：

<script type="text/html" id="document-template">
    <li class="list-group-item">
               <span class="badge" data-bind="text:Caption"></span>
               <span class="badge" data-bind="text:PageCount"></span>
    </li>
</script>

【讨论】：

您的更改有效！非常感谢。父div的文本绑定会覆盖里面的子html标签吗？
是的，它替换了父 div 的全部内容，因此是您的问题。

【解决方案2】：

这一行...

<li class="list-group-item" data-bind="text: Caption">

替换以下内容

<span class="badge" data-bind="text:PageCount"></span>

【讨论】：

完美！非常感谢。父div的文本绑定会覆盖里面的子html标签吗？
是的，文本绑定会覆盖内部 HTML，因此您的跨度会消失。

【解决方案3】：

这对我也有用，这里是我的例子：

之前（在此按钮中，字体真棒图标被覆盖，仅呈现文本）：

<button class="btn btn-primary" data-bind="text:toggleButtonText(), enable:isShowAllRequired(), click:toggleIsShowAll"> 
      <i data-bind="css:getShowallIcon()"></i>
</button>

之后（使用上面建议的额外跨度，它呈现图标 + 文本）：

<button class="btn btn-primary" data-bind="enable:isShowAllRequired(), click:toggleIsShowAll"> 
    <i data-bind="css:getShowallIcon()"></i>
    <span data-bind="text:toggleButtonText()"></span>
</button>

【讨论】：