Смешивание нокаута foreach со статическими элементами в группе кнопок Bootstrap

Question

Я пытаюсь смешать foreach со статическими элементами в группе btn-группы Bootstrap, потому что я хотел бы, чтобы некоторые из кнопок были заполнителями для будущих опций. Так что я поставил его так:

<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 прерывает стандартную стилизацию группы кнопок. Я также попытался containerless состав:

<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 на div btn-group, это приведет к тому, что статические элементы будут повторяться для каждого 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 --> 

Я не могу найти никаких причин, почему ваш второй подход будет генерировать объект диапазона.