Следите за вкладками с помощью knockoutjs + twitter bootstrap

Я пытаюсь отслеживать выбранную вкладку в модели представления, но я не могу заставить ее работать.

В следующем коде при нажатии вкладки заголовок будет обновляться правильно, но содержимое вкладки не отображается. Если вы удалите , click: $parent.selectSection, тогда содержимое будет показано, но заголовок не обновится.

Теперь, если вы удалите data-bind="css: { active: selected }" из li, тогда он работает, когда вы нажимаете вкладки, но кнопка для выбора второй вкладки не делает.

Как я могу сделать эту работу?

Смотрите: 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());