twitter-bootstrap 使用knockoutjs + twitter bootstrap 跟踪标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16501207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep track of tabs with knockoutjs + twitter bootstrap
提问by Manuel
I'm trying to keep track of the selected tab in the view model but I can't seem to make it work.
我正在尝试跟踪视图模型中选定的选项卡，但我似乎无法让它工作。
In the following code when you click a tab the header will update correctly but the content of the tab is not displayed. If you remove , click: $parent.selectSectionthen the contents are shown but the header does not update.
在以下代码中，当您单击选项卡时，标题将正确更新，但不显示选项卡的内容。如果您删除，, click: $parent.selectSection则显示内容但标题不会更新。
Now if you remove the data-bind="css: { active: selected }"from the lithen it seems to work when you click the tabs but the button to select the second tab doesn't.
现在，如果您data-bind="css: { active: selected }"从中删除 ，li那么当您单击选项卡时似乎可以工作，但选择第二个选项卡的按钮却不起作用。
How can I make this work?
我怎样才能使这项工作？
See: http://jsfiddle.net/5PgE2/3/
见：http: //jsfiddle.net/5PgE2/3/
HTML:
HTML：
<h3>
<span>Selected: </span>
<span data-bind="text: selectedSection().name" />
</h3>
<div class="tabbable">
<ul class="nav nav-tabs" data-bind="foreach: sections">
<li data-bind="css: { active: selected }">
<a data-bind="attr: { href: '#tab' + name }
, click: $parent.selectSection" data-toggle="tab">
<span data-bind="text: name" />
</a>
</li>
</ul>
<div class="tab-content" data-bind="foreach: sections">
<div class="tab-pane" data-bind="attr: { id: 'tab' + name }">
<span data-bind="text: 'In section: ' + name" />
</div>
</div>
</div>
<button data-bind="click: selectTwo">Select tab Two</button>
JS:
JS：
var Section = function (name) {
this.name = name;
this.selected = ko.observable(false);
}
var ViewModel = function () {
var self = this;
self.sections = ko.observableArray([new Section('One'),
new Section('Two'),
new Section('Three')]);
self.selectedSection = ko.observable(new Section(''));
self.selectSection = function (s) {
self.selectedSection().selected(false);
self.selectedSection(s);
self.selectedSection().selected(true);
}
self.selectTwo = function() { self.selectSection(self.sections()[1]); }
}
ko.applyBindings(new ViewModel());
回答by RP Niemeyer
There are several ways that you can handle this either using bootstrap's JS or by just having Knockout add/remove the activeclass.
有几种方法可以使用引导程序的 JS 或仅通过 Knockout 添加/删除active类来处理此问题。
To do this just with Knockout, here is one solution where the Section itself has a computed to determine if it is currently selected.
为了仅使用 Knockout 做到这一点，这里是一种解决方案，其中部分本身具有计算以确定当前是否被选中。
var Section = function (name, selected) {
this.name = name;
this.isSelected = ko.computed(function() {
return this === selected();
}, this);
}
var ViewModel = function () {
var self = this;
self.selectedSection = ko.observable();
self.sections = ko.observableArray([
new Section('One', self.selectedSection),
new Section('Two', self.selectedSection),
new Section('Three', self.selectedSection)
]);
//inialize to the first section
self.selectedSection(self.sections()[0]);
}
ko.applyBindings(new ViewModel());
Markup would look like:
标记看起来像：
<div class="tabbable">
<ul class="nav nav-tabs" data-bind="foreach: sections">
<li data-bind="css: { active: isSelected }">
<a href="#" data-bind="click: $parent.selectedSection">
<span data-bind="text: name" />
</a>
</li>
</ul>
<div class="tab-content" data-bind="foreach: sections">
<div class="tab-pane" data-bind="css: { active: isSelected }">
<span data-bind="text: 'In section: ' + name" />
</div>
</div>
</div>
Sample here: http://jsfiddle.net/rniemeyer/cGMTV/
此处示例：http: //jsfiddle.net/rniemeyer/cGMTV/
There are a number of variations that you could use, but I think that this is a simple approach.
您可以使用多种变体，但我认为这是一种简单的方法。
Here is a tweak where the active tab used the section name as a template: http://jsfiddle.net/rniemeyer/wbtvM/
这是活动选项卡使用部分名称作为模板的调整：http: //jsfiddle.net/rniemeyer/wbtvM/
