使用knockoutjs + twitter bootstrap跟踪标签

我正在尝试跟踪视图模型中的选定选项卡,但我似乎无法使其工作.

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

现在,如果你data-bind="css: { active: selected }"从那里删除li它似乎工作时单击选项卡,但按钮选择第二个选项卡不.

我怎样才能做到这一点？

请参阅:http://jsfiddle.net/5PgE2/3/

HTML:

    Selected: 
    


    

        

            
                
            
        
    
    

        

            
        
    

Select tab Two

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

RP Niemeyer.. 30

有几种方法可以使用bootstrap的JS或只是让Knockout添加/删除active类来处理这个问题.

要使用Knockout执行此操作,这里有一个解决方案,其中Section本身具有计算以确定它当前是否被选中.

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

标记看起来像:

此处示例:http://jsfiddle.net/rniemeyer/cGMTV/

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

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

有几种方法可以使用bootstrap的JS或只是让Knockout添加/删除active类来处理这个问题.

要使用Knockout执行此操作,这里有一个解决方案,其中Section本身具有计算以确定它当前是否被选中.

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

标记看起来像:

此处示例:http://jsfiddle.net/rniemeyer/cGMTV/

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

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