Нокаут привязывает класс css к наблюдаемому свойству модели

Я хочу привязать класс 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">

Что я делаю неправильно?

Ответ 1

В этой ситуации вы можете:

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

Единственным недостатком этого метода является то, что он будет устанавливать класс непосредственно, а не включать или выключать класс, поэтому, если вы используете несколько классов, то selectedPriority должен содержать полный список классов.

Ответ 2

Похоже, вы не можете установить класс непосредственно из своей модели: http://knockoutjs.com/documentation/css-binding.html

Вы не можете сделать что-то вроде этого:

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

Ответ 3

Как указано в комментариях @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:

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