javascript - Knockout CSS 样式，通过函数和绑定

Question

我知道您可以使用敲除来根据函数返回设置类，如下所示；

<span data-bind="css: styling()"></span>

您还可以使用真/假值将它们设置为内联。

<span data-bind="css: {className: $parent.active() == $data}"></span>

有没有办法在一个绑定中做到这两点？我的示例是，我想根据 span 元素显示的项目类型返回一个自定义类（其中会有很多），但如果它们被选中，我也希望它们被突出显示。

似乎您不能使用对象右侧的函数，并且有两个会导致第二个覆盖第一个。

有任何想法吗？

Answer 1

使用此示例，您将能够指定每个项目的类别。

看法

<div data-bind="foreach: items" >
    <span data-bind="css : $parent.styling($data), text: $data"></span>
</div>

JS：

var vm = {
    items : ['a','b','c' ],

    styling : function(item ) {
        if(item =='a') return 'active';
        if(item =='b') return 'active bold';
        return '';
    }    
};

ko.applyBindings(vm);

见小提琴

---

编辑：

@Shadow：你说得对，如果你将一个值传递给一个计算值，它就是设置（或写入）它。

我认为这将符合您的需求。当在一个项目上时，切换功能被调用。然后活动的 observable 将被更改，最后计算样式。

JS

var Item =  function(data) {
    var self = this;
    self.name = data;
    self.active = ko.observable(false);
    self.styling = ko.computed(function(item ) {
        if(self.active()) return 'active';
        return '';  
    });
    self.toggle =  function(){
        self.active(!self.active());
    }
};

var vm = {
    items : [new Item('a'),new Item('b'), new Item('c') ]        
};


ko.applyBindings(vm);

看法

<div data-bind="foreach: items" >
    <span data-bind="css : styling, text: name, click : toggle"></span>
    <br/>
</div>

见小提琴