Twitter bootstrap 如何预选数据绑定引导选项卡

此Durandal 2剔除标记生成具有适当内容的选项卡，但没有任何选项卡标记为活动

  <div id="editor" class="html-editor form-control" contenteditable="true" data-bind="html: Content"></div>
  <label>Questions</label>
  <div class="question-container navbar">
    <ul class="nav nav-tabs" id="Questions" data-bind="foreach: Questions">
      <li role="presentation">
        <a data-toggle="tab" data-bind="text: Caption, attr: { href: '#' + QuestionId }"></a>
      </li>
    </ul>
    <div class="tab-content Questions" data-bind="foreach: Questions">
      <div class="tab-pane well" data-bind="attr: { id: QuestionId }">
        <div class="html-editor form-control" contenteditable="true" data-bind="html: Question"></div>
        <div data-bind="foreach: Answers">
          <div class="input-group">
            <textarea class="form-control" data-bind="value: Caption"></textarea>
            <span class="input-group-addon">
              <input type="radio" aria-label="Correct answer" data-bind="checked:isCorrect" />
            </span>
          </div>
        </div>
      </div>
    </div>
 </div>&nbsp;

问题

在静态标记中，可以通过使用CSS class

active

标记来识别最初处于活动状态的选项卡

当所有的标签都被生成时，人们会怎么做呢

这是Durandal 2，因此我可以处理

附加的
并使用jQuery操作DOM

推荐的方法是什么？
在评论中聊天后，这里是最终选择的方法

在引导文档中：

其中
myTab
是包含选项卡的
UL
的标识符

在这种情况下：

<ul class="nav nav-tabs" id="Questions" data-bind="foreach: Questions">
  <li role="presentation">
    <a data-toggle="tab" data-bind="attr: { href: '#' + QuestionId }">
      <span data-bind="text: Caption"></span>
      <span class="glyph-button" data-bind="click: deleteQuestion">
        <i class="fa fa-trash"></i>
      </span>
    </a>
  </li>
</ul>

setTimeout
允许绑定在我们尝试操作DOM之前完成对它的修改。
如果可能，您应该避免在视图模型中直接操作DOM。如果您只想选择第一个选项卡，可以使用以下选项（未测试）：

问题





或者，您可以在问题对象上创建一个属性，以确定它是否应该处于活动状态，并使用与上面相同的css绑定来绑定该属性。
仅使用一个想法，但尝试仅使用一次“show.bs.tab”事件，以使您的逻辑（不确定它是否可以用于您的案例[idea]）。唉，在某些选项卡被激活之前，这不会触发。但你给了我一个主意。我需要为用户添加新问题的方法。如果我在静态标记标签，它将激活，我可以使用你的想法！我很蠢，你能把模板插入并使用“$（'#myTab'）.tab（'show'）”吗？？（法语抱歉有时很难分享我的东西）解开它？我以为你建议我使用一次性绑定：
$.one（“show.bs.tab”，fn）<ul class="nav nav-tabs" id="Questions" data-bind="foreach: Questions">
  <li role="presentation">
    <a data-toggle="tab" data-bind="attr: { href: '#' + QuestionId }">
      <span data-bind="text: Caption"></span>
      <span class="glyph-button" data-bind="click: deleteQuestion">
        <i class="fa fa-trash"></i>
      </span>
    </a>
  </li>
</ul>

  for (var i = 0; i < result.InductionQAs.length; i++) {
    var question = {
      deleteQuestion: deleteQuestion,
      QuestionId: result.InductionQAs[i].InductionQAID,
      Question: ko.observable(result.InductionQAs[i].Question),
      Answers: ko.observableArray()
    };
    question.Caption = ko.computed(function () {
      var q = this.Question();
      var threshold = 20;
      return (q.length <= threshold) ? q : q.substring(0, threshold - 2) + "...";
    }, question);
    var answers = result.InductionQAs[i].Answers.split("|");
    for (var j = 0; j < answers.length; j++) {
      var a = answers[j];
      question.Answers.push({
        Caption: (a[0] == "*") ? a.substring(1) : a,
        isCorrect: a[0] == "*"
      });
    }
    vm.Questions.push(question);
  }
  setTimeout(function () {
    $("#Questions a:first").tab("show");
  }, 20);

<label>Questions</label>
  <div class="question-container navbar">
    <ul class="nav nav-tabs" id="Questions" data-bind="foreach: Questions">
      <li role="presentation">
        <a data-toggle="tab" data-bind="text: Caption, attr: { href: '#' + QuestionId }, css: {'active':  $index() === 1 }"></a>
      </li>
    </ul>
    <div class="tab-content Questions" data-bind="foreach: Questions">
      <div class="tab-pane well" data-bind="attr: { id: QuestionId }, css: {'active': $index() === 1 }">
        <div class="html-editor form-control" contenteditable="true" data-bind="html: Question"></div>
        <div data-bind="foreach: Answers">
          <div class="input-group">
            <textarea class="form-control" data-bind="value: Caption"></textarea>
            <span class="input-group-addon">
              <input type="radio" aria-label="Correct answer" data-bind="checked:isCorrect" />
            </span>
          </div>
        </div>
      </div>
    </div>
 </div>