使用 knockoutjs + twitter bootstrap 跟踪标签答案

【问题标题】：Keep track of tabs with knockoutjs + twitter bootstrap使用 knockoutjs + twitter bootstrap 跟踪标签
【发布时间】：2013-05-06 06:09:24
【问题描述】：

我正在尝试跟踪视图模型中选定的选项卡，但我似乎无法让它工作。

在以下代码中，当您单击选项卡时，标题会正确更新，但不会显示选项卡的内容。如果您删除 , click: $parent.selectSection，则会显示内容，但标题不会更新。

现在，如果您从li 中删除data-bind="css: { active: selected }"，那么当您单击选项卡时它似乎可以工作，但选择第二个选项卡的按钮不起作用。

我怎样才能做到这一点？

见：http://jsfiddle.net/5PgE2/3/

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：

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());

【问题讨论】：

标签： javascript html twitter-bootstrap knockout.js

【解决方案1】：

有几种方法可以使用引导程序的 JS 或仅通过 Knockout 添加/删除 active 类来处理此问题。

要仅使用 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());

标记看起来像：

<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>

示例：http://jsfiddle.net/rniemeyer/cGMTV/

您可以使用多种变体，但我认为这是一种简单的方法。

这是一个调整，其中活动选项卡使用部分名称作为模板：http://jsfiddle.net/rniemeyer/wbtvM/

【讨论】：