Question

我从后端获取了一个列表，其中包含了我需要显示或编辑的实体（每个实体都有几个属性）。我想使用bootstrap选项卡执行此操作。每个标签一个实体。我的列表中的实体数量各不相同，所以我想在一个ko foreach循环中执行此操作。它与此非常相似：Knockoutjs template foreach, special first item 与众不同，我不能让我的工作。我可以单击导航栏中的选项卡，它们会正确显示切换。标签内容保持空白，很难。

<ul class="nav nav-tabs">
    <!-- ko foreach: vm.entities -->
    <!-- ko if: $index() == 0 -->
    <li class="active"><a data-toggle="tab" data-bind="attr: { href: Id , title: Name},text: Name"></a></li>
    <!-- /ko -->
    <!-- ko if: $index() != 0 -->
    <li><a data-toggle="tab" data-bind="attr: { href: Id , title: Name},text: Name"></a></li>
    <!-- /ko -->
    <!-- /ko -->
</ul>

<div class="tab-content">
    <!-- ko foreach: vm.entities -->
        <!-- ko if: $index() == 0 -->
            <div data-bind="attr: {'id': Id}" class="tab-pane fade in active">
        <!-- /ko -->
        <!-- ko if: $index() != 0 -->
            <div data-bind="attr: {'id': Id}" class="tab-pane fade">
        <!-- /ko -->

        <span data-bind="text: Name"></span>and some other stuff I need to display...

        <!-- ko if: $index() == 0 -->
            </div>
        <!-- /ko -->
        <!-- ko if: $index() != 0 -->
            </div>
        <!-- /ko -->
    <!-- /ko -->
</div>

Answer 1

我不能从你的问题中说出太多。但问题可能是这个

  <li><a data-toggle="tab" data-bind="attr: { href: Id , title: Name},text: Name"></a></li>

我认为此处的ID只是一个普通的ID，不会以#开头。要使此选项卡指向正确的内容，它需要href指定正确内容的ID。为此，它需要前缀#。所以它应该是这样的。

<li><a data-toggle="tab" data-bind="attr: { href: '#' + Id , title: Name}, text: Name"></a></li>

带有knockout observablearry列表的动态引导选项卡

1 个答案: