Wie kann das Attribut "Klasse" oder "ID" eines DIV bei Verwendung von Containerless-Steuerfluss Daten binden?

Question

Ich probiere den großartigen neuen Containerless -Steuerfluss (neue Feature -Nummer 2) an aus Knockout 2.0.0 veröffentlicht oder 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>

Was wäre, wenn ich so etwas wie <li wollte class = "$ {name}"> < /li>

Dies war trivial bei der Verwendung von Vorlagen, aber ich kann es momentan nicht zum Laufen bringen.
Ich habe es versucht <li Daten-Bind = 'Klasse: Name' '> < /li> aber vergeblich.

Ich bin neu hier, bitte mach mich leicht.

Answer 1

Du kannst den ... benutzen css Bindung. Es kann auf zwei Arten verwendet werden. Entweder mit einer dynamischen Klasse (oder Liste der Klassen):

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

oder mit einzelnen Klassen, die gegen Wahrheits-/Falsy -Werte gebunden sind, um anzuzeigen, ob dies aus dem Element hinzugefügt/entfernt werden sollte:

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

Answer 2

Ab Mitte 2012 gibt es jetzt das "CSS" Bindung direkt an den Klassennamen.

z.B:

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

Answer 3

Nur für den Fall, wenn sich jemand fragt, wie man "CSS" -attribut mit ID -Attribut verwendet, habe ich sowohl "CSS" als auch ID -Attribute verwendet, für mich funktionierte es nicht, wenn "CSS" -attribut nicht das erste ist, also halten Sie sich also auf. CSS "Attribut als Ihre Faust.

<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'}"