foreach 中的淘汰赛 css 绑定

Question

在<ul> foreach 绑定中，我希望淘汰赛为每个<li> 添加一个动态css 类。

我绑定的对象如下所示：

{
    id: 1234,
    class: "foo",
}

我要knockout把每一项的class属性加到对应的<li>上，像这样：

<ul data-bind="foreach: TheList">
    <li data-bind="css: class" />
</ul>

所以我的[有效]输出是这样的：

<ul>
    <li class="foo" />
    <li class="bar" />
    <li class="etc" />
</ul>

我无法弄清楚绑定语法。这个我试过了，

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

它会抛出一个错误：

无法解析绑定。消息：SyntaxError：语法错误；绑定值：css:class

我试过了，

<li data-bind="css: $data.class" />

它会抛出一个错误：

无法解析绑定。消息：语法错误：预期标识符；绑定值：css: $data.class

我把class用引号括起来以避免js关键字冲突，

<li data-bind="css: 'class'" />

这不会引发错误，但会产生意想不到的结果。我 100% 肯定“修剪”不是集合中任何项目的 class 属性值之一：

<li class="trim" data-bind="css: 'class'" __ko__1354588574237="ko3">

我不知道在这种情况下如何或是否可以使用计算值，因为 AFAIK 我无法将变量（如$index 或 $data）传递给计算值，因此计算值无法知道哪个要返回 class 的项目。

对于这种情况，合适的绑定语法是什么，可能吗？

解决方案/解决方法

当属性命名为“类”时，这似乎是 IE8 中的css: 绑定问题。如果遇到这种情况，这里有 3 种不同的解决方法：

将字段名称更改为“类”以外的名称（如果您可以控制源）。

或者，您可以修改列表中的对象，以便可以从不同的名称访问该值，即，

for (var i = 0; i < TheList.length; i++)
{
    TheList[i].safeName = TheList[i]['class'];
}

或者，您可以使用 attr: 绑定而不是 css: 绑定，这似乎不会遇到同样的问题，并且可以使用称为“类”的成员，只要它们被包含在引号中：

<li data-bind="attr: { 'class': 'class' } />

Answer 1

这应该可行：

<ul data-bind="foreach: TheList">
    <li data-bind="css: $data['class'], text: $data['class']" />
</ul>​

我认为您遇到了class 的关键字问题。 working jsfiddle.