knockout.js - saber - ¿Cómo enlazar los datos del atributo ''clase'' o ''id'' de un div, mientras se utiliza el flujo de control sin contenedor?

saber si existe un atributo javascript

Question

Estoy probando el nuevo y excelente flujo de control sin contenedor (nueva función número 2) en Knockout 2.0.0 publicado o 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>

¿Qué pasa si quiero algo como <li class = "$ {name}" > </ li>

Esto fue trivial al usar plantillas, pero no puedo hacerlo funcionar ahora mismo.
probé <li data-bind = ''clase: nombre'' > </ li> pero fue en vano.

Soy nuevo aquí, por favor, acéptame.

Answer 1

A partir de mediados de 2012, ahora existe el enlace binding para enlazar directamente al nombre de la clase.

p.ej:

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

Answer 2

En caso de que alguien se pregunte cómo usar el atributo "css" con el atributo id, estaba usando los atributos "css" e id, para mí no funcionó si el atributo "css" no es el primero, así que guárdate " css "atributo como tu puño.

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

...
...
...

</div>

Answer 3

Puedes usar el binding css . Se puede usar de dos maneras. Ya sea con una clase dinámica (o una lista de clases):

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

o con clases individuales vinculadas con los valores de truthy / falsy para indicar si deben añadirse / eliminarse del elemento:

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

Answer 4

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