Как привязать данные к атрибуту 'class' или 'id' div, используя при этом поток управления без контейнера?

Я пробовал новый новый поток без контейнера (новая функция номер 2) в выпущен нокаут 2.0.0 или http://jsfiddle.net/StevenSanderson/8vms5/light

<ul>
    <li><strong>Here is a static header item</strong></li>
    <!-- ko foreach: products -->
    <li>
        <em data-bind="text: name"></em>
        <!-- ko if: manufacturer -->        
           &mdash; made by <span data-bind="text: manufacturer.company"></span>
        <!-- /ko -->
    </li>
    <!-- /ko -->
</ul>

Что, если бы я хотел что-то вроде < li class= "$ {name}" > </li>

Это было тривиально при использовании шаблонов, но я не могу заставить его работать прямо сейчас.
я попробовал < li data-bind = 'class: name' > </li> но тщетно.

Я новичок здесь, пожалуйста, успокойся.

Ответы

Ответ 1

Вы можете использовать css binding. Его можно использовать двумя способами. Либо с динамическим классом (или списком классов):

<li data-bind="css: name"></li>

или с отдельными классами, связанными с значениями правды/ложности, чтобы указать, должны ли они быть добавлены/удалены из элемента:

<li data-bind="css: { classOne: hasClassOne, classTwo: hasClassTwo }"></li>

Ответ 2

По состоянию на середину 2012 года теперь существует "css" привязка непосредственно к имени класса.

например:.

<li data-bind="css: className">**content**</li>

Ответ 3

На всякий случай, если кто-то задается вопросом, как использовать атрибут "css" с атрибутом id, я использовал оба атрибута "css" и id, для меня он не работал, если атрибут "css" не первый, поэтому сохраните атрибут "css" как ваш первый.

<div class="panel-collapse collapse" data-bind="css:{in:$index()==0}, attr: { id:'collapse'+$index()} ">

...
...
...

</div>

Ответ 4

data-bind="attr:{ id:isConditionTrue()<=0 ?'test1':'test2'}"