在 Knockout 数据绑定文本中包含 span 元素答案

【问题标题】：Include span element inside Knockout data bound text在 Knockout 数据绑定文本中包含 span 元素
【发布时间】：2015-12-18 08:19:43
【问题描述】：

我的页面上有一个引导下拉菜单，它是动态填充的，没有剔除数据。标准的引导下拉菜单是这样的：

<div class="dropdown">
     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
         Dropdown <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">

     </ul>
</div>

请注意，下拉菜单的“标题”将是“下拉菜单”，而“克拉”类的跨度将添加向下的克拉图标，使其看起来像一个下拉菜单。

问题是当我添加一个数据绑定来更改选择菜单标题的文本时（为简单起见省略了一些类）：

<div>
     <button data-bind = "text: MenuTitle"> 
         Dropdown <span class="caret"></span>
     </button>
     <ul >

     </ul>
</div>

MenuTitle 只是一个带有文本的简单 ko.observable。

它用克拉覆盖跨度。如何对按钮的文本进行数据绑定，并且仍然在其中附加 span 类 carat？

【问题讨论】：

标签： jquery twitter-bootstrap knockout.js

【解决方案1】：

将绑定移动到仅为该文本创建的新跨度：

<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
    <span data-bind="text: MenuTitle"></span><span class="caret"></span>
</button>

【讨论】：

现在看起来很明显，+1 效果很好，允许时会接受。