敲门不像另一个里面的html标签吗？

Question

我正在使用淘汰赛3.0建立一个网页。 我想要做的就是创建一个带徽章的bootstrap列表，参见下面的示例和代码

然而，当我在像这样的淘汰模板绑定中这样做时

<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）我做错了什么，如果我错了，你能给我一些建议吗？

由于

Answer 1

它使用文本绑定覆盖LI元素的内容。只需在LI中放两个跨度：

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

Answer 2

这一行...

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

取代以下

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

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