在剔除数据绑定文本中包含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。可以通过文本观察到。

它以克拉覆盖跨度。数据如何绑定按钮的文本，并且仍然在其中附加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>