javascript - knockout js css 绑定(bind)不保存更改

Question

在 div 的类更改后，knockout js css biniding 不会保存更改:我的模型包含 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”变为“active”。还有其他方式。

fiddle 工作示例:http://jsfiddle.net/LkqTU/24843/

Answer 1

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

想法是根据Boolean prop的true/false将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 -->

View 模型:

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

示例工作 fiddle here