如何使用无容器控制流数据绑定div的'class'或'id'属性?

nth*_*apa 47 knockout.js

我正在尝试在Knockout 2.0.0发布的新的无容器控制流程(新功能2) 或 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>
Run Code Online (Sandbox Code Playgroud)

如果我想要像<li class ="$ {name}" > </ li> 这样的东西怎么办?

使用模板时这很简单,但我现在无法使其正常工作.
我试过<li data-bind ='class:name' > </ li>但是徒劳无功.

我是新来的,请放轻松我.

RP *_*yer 73

您可以使用css 绑定.它可以用两种方式.使用动态类(或类列表):

<li data-bind="css: name"></li>
Run Code Online (Sandbox Code Playgroud)

或者使用与truthy/falsy值绑定的单个类来指示是否应该从元素中添加/删除它们:

<li data-bind="css: { classOne: hasClassOne, classTwo: hasClassTwo }"></li>
Run Code Online (Sandbox Code Playgroud)


Ran*_*pho 21

截至2012年中期,现在有"css"绑定直接绑定到类名.

例如:

<li data-bind="css: className">**content**</li>
Run Code Online (Sandbox Code Playgroud)

  • 这比`attr`更有用,你可以有常规类和一个动态的"额外"类,例如`<div class ="myclass myclass2"data-bind ="css:extraClass">` (3认同)