Twitter bootstrap 在引导按钮组中将Knockout foreach与静态元素混合

我试图在引导btn组中将

foreach

与静态元素混合，因为我希望一些按钮成为未来选项的占位符。所以我把它设置成这样：

<div class="btn-group pull-right">
    <span data-bind="foreach: router.visibleRoutes">
        <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" href="#" class="btn btn-info"></a>
    </span>
    <div class="btn btn-info">Future Option</div>
    <div class="btn btn-info">Future Option</div>
</div>

---

但是它在渲染时会产生相同的

span

标记，因此效果是相同的。如果我将

foreach

放在

btn group

div上，这将导致每个

路由器的静态元素重复。visibleRoutes

，这是不可接受的。有什么办法可以解决这个问题吗？

第二种方法似乎有效。这可能是浏览器缓存问题吗

参见JSFIDLE：

我找不到第二种方法生成span对象的任何原因

<div class="btn-group pull-right">
    <!-- ko foreach: router.visibleRoutes -->
        <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" href="#" class="btn btn-info"></a>
    <!-- /ko -->
    <div class="btn btn-info">Future Option</div>
    <div class="btn btn-info">Future Option</div>
</div>

<!-- ko foreach: visibleRoutes -->
    <a data-bind="css: { active: isActive }, attr: { href: hash }, text: name" href="#" class="btn btn-info"></a>
<!-- /ko -->