knockout js css biniding不保存更改

Question

淘汰js css biniding在div的类改变后不保存更改： 我的模型包含2个属性：

man: '',
woman: 'active'

我在dom中有2个元素，可以更改哪些类。

<input type='button' value='Is MAN?' class='' data-bind='css: man'>
<input type='button' value='Is WOMAN?' class='' data-bind='css: woman'>

我希望通过更改html元素类来改变模型的属性。 例如：如果我们将类'active'添加到

<input data-bind='css: man' class='active' />

我们的模型属性'man'变为'活跃'。和其他方式。

关于小提琴的工作示例：http://jsfiddle.net/LkqTU/24843/

Answer 1

我做了一些修改，使代码易于管理

想法是根据布尔道具的真/假

将class的设置保留为html控件到viewModel

查看：

<!-- ko foreach:people -->
PERSON DATA
<br/>
<input type='button' value='Is MAN?' class='' data-bind="css:{'active':man},,click:mClick" ><br/>
<input type='button' value='Is WOMAN?' class='' data-bind="css:{'active' : woman},click:wClick"><br/><br/>
<!-- /ko -->

<强>视图模型：

var data = {
    persons:[
        new PersonViewModel({
            man: false,
            woman: true
        }),
        new PersonViewModel({
            man: true,
            woman: false
        })
    ]
};

function PersonViewModel(data){
    var self = this;
    self.man = ko.observable(data.man);
    self.woman = ko.observable(data.woman);
     self.mClick=function(){
      self.man(!self.man())
    }
      self.wClick=function(){
      self.woman(!self.woman())
    }
}

var applicationVM = function (data) {
    var self = this;
    self.people = ko.observableArray(data.persons);
    self.savechanges = function() {
        alert(ko.toJSON(self.people));
    };  
};

$(document).ready(function() {
    ko.applyBindings( new applicationVM(data) );
});

示例工作小提琴 here