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

Question

Я пробую отличный новый поток управления без контейнеров (новая функция 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: имя'> < /li> но напрасно.

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

Answer 1

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

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

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

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

Answer 2

По состоянию на середину 2012 года, теперь есть "CSS" Привязка, чтобы привязать непосредственно с именем класса.

например:

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

Answer 3

На случай, если кто -то задается вопросом, как использовать атрибут «CSS» с атрибутом ID, я использовал как «CSS», так и атрибуты ID, для меня это не сработало, если атрибут "CSS" не является первым, так что держите " CSS "атрибут как ваш кулак.

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

...
...
...

</div>

Answer 4

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