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-group div上，那么会导致每个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对象的任何原因。

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

1 个答案: