Javascript Knockoutjs绑定到复杂html对象

我有一个引导下拉列表，项目中有徽章。我认为这并不复杂，但我不能这么做：

<ul class="dropdown-menu" role="menu" data-bind="foreach: events">
    <li><a href="#" data-bind="text: $data.name"><span class=" badge pull-right" data-bind="text: $data.value">NUMBER FROM MODEL TOO</span></a></li>
</ul>

我的问题是，绑定工作正常，生成了li项，但li的innerHtml只包含文本，而不是包含绑定编号的文本+跨度

---

如何执行此操作？

如果在a标记上使用文本绑定，其整个内容将替换为$data.name。 要同时显示值和名称，可以执行以下操作：

<ul class="dropdown-menu" role="menu" data-bind="foreach: events">
    <li><a href="#"><span data-bind="text: $data.name"></span><span class=" badge pull-right" data-bind="text: $data.value">NUMBER FROM MODEL TOO</span></a></li>
</ul>

小提琴：