如何预选数据绑定 bootstrap 选项卡
How to preselect a data-bound bootstrap tab
此 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>
在静态标记中,可以通过使用 CSS class active
.
标记来识别最初活动的选项卡
当所有选项卡都生成后,该怎么做?
这是 Durandal 2,所以我 可以 处理 attached
并使用 jQuery 操纵 DOM。
推荐的方法是什么?
大家在评论里聊了聊终于选好了
在 bootstrap 文档中:http://getbootstrap.com/javascript/#tabs-usage
$('#myTab a:first').tab('show')
其中 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>
以及来自 Durandal activate
处理程序的代码。此代码的大部分填充数据以进行绑定;包含它是为了帮助理解标记。在最后几行中,出现了选项卡激活的奇迹。
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);
setTimeout
允许绑定在我们尝试操作它之前完成对 DOM 的修改。
如果可能的话,您应该避免在您的视图模型中进行直接 DOM 操作。如果您只想选择第一个选项卡,您可以使用以下(未经测试):
<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>
或者,您可以在问题对象上创建一个 属性 以确定它是否应该处于活动状态,并使用与上面相同的 css 绑定来绑定到它。
此 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>
在静态标记中,可以通过使用 CSS class active
.
当所有选项卡都生成后,该怎么做?
这是 Durandal 2,所以我 可以 处理 attached
并使用 jQuery 操纵 DOM。
推荐的方法是什么?
大家在评论里聊了聊终于选好了
在 bootstrap 文档中:http://getbootstrap.com/javascript/#tabs-usage
$('#myTab a:first').tab('show')
其中 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>
以及来自 Durandal activate
处理程序的代码。此代码的大部分填充数据以进行绑定;包含它是为了帮助理解标记。在最后几行中,出现了选项卡激活的奇迹。
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);
setTimeout
允许绑定在我们尝试操作它之前完成对 DOM 的修改。
如果可能的话,您应该避免在您的视图模型中进行直接 DOM 操作。如果您只想选择第一个选项卡,您可以使用以下(未经测试):
<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>
或者,您可以在问题对象上创建一个 属性 以确定它是否应该处于活动状态,并使用与上面相同的 css 绑定来绑定到它。