将Knockout foreach与Bootstrap按钮组中的静态元素混合

Question

我试图将foreach与Bootstrap btn-group中的静态元素混合，因为我想让一些按钮成为未来选项的占位符。所以我这样设置:

<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>

然而，这导致用foreach产生的按钮在所有方面都有圆角，这样它们就不会像您期望的btn-group那样"齐平"。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>

，但它在渲染时产生相同的span标签，所以效果是相同的。如果我将foreach放在btn-groupdiv上，这将导致每个router.visibleRoutes重复静态元素，这是不可接受的。还有别的办法吗?

Answer 1

看来你的第二种方法有效。可能是浏览器缓存问题吗?

参见jsfiddle: http://jsfiddle.net/ptw8a/

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

我找不到任何理由为什么你的第二种方法会生成一个span对象