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

Question

我的页面上有一个引导下拉列表,动态填充而没有敲除数据.标准引导下拉列表是这样的:

<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类克拉？

Answer 1

将绑定移动到仅为该文本创建的新范围:

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