将css类绑定到观察到的模型属性

时间:2011-10-12 10:49:23

标签: knockout.js

我想将divs css类绑定到视图模型的属性,如下所示:

<div id="statusIndicator" data-bind="css: selectedPriority">

但这会产生结果:

 <div id="statusIndicator" class=" 0 1 2 3">

这是视图模型:

myViewModel = {
    selectedPriority: ko.observable('High'),
    Company: ko.observable("Bert"),
    Rows: ko.observableArray([
         new row(),
         new row(),
         new row()
    ]),
    Tabs: ['High', 'Medium', 'Low'],

    selectPriority: function (tab) {
        this.selectedPriority(tab);
    }
};

因此,当我加载使用此视图模型的页面时,我希望div为:

<div id="statusIndicator" class="High">

我做错了什么?

3 个答案:

答案 0 :(得分:43)

对于这种情况,你可以这样做:

<div data-bind="attr: { 'class': selectedPriority}">

此方法的唯一缺点是它将直接设置类而不是打开或关闭类,因此如果您使用多个类,则selectedPriority将需要包含完整的类列表。

答案 1 :(得分:6)

您似乎无法直接在模型中设置课程:http://knockoutjs.com/documentation/css-binding.html

你做不到这样的事情:

 <div data-bind="css: { high: selectedPriority() == 1, medium: selectedPriority() == 2}">

答案 2 :(得分:4)

正如@Chris Jaynes在评论中暗示的那样,Knockout 2.2.0使得设置类名变得容易,详见Knockout作者史蒂夫桑德森的博客文章。

http://blog.stevensanderson.com/2012/10/29/knockout-2-2-0-released/

根据帖子:

  

我们还使一些功能更像您可能的工作   认为他们应该工作。例如,css绑定现在可以附加   以编程方式生成的CSS类名称到元素(以前,它   仅限于切换预定义的CSS类名称

博客文章还包括一个jsfiddle,您可以使用它来查看绑定的实际操作。 http://jsfiddle.net/qRmfH/light/

请注意他的示例中的css绑定语法css: chosenTicketCss,它是一个返回css类名称的computed observable

<p data-bind="visible: chosenTicket, css: chosenTicketCss">
    Excellent choice! Suits you perfectly.
</p>