Question

在<ul> foreach绑定中，我希望knockout为每个<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" />

它会抛出错误：

无法解析绑定。消息：SyntaxError：预期标识符;绑定值：css：$ data.class

我在引号中包含class以避免js关键字冲突，

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

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

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

我不知道在这种情况下我是如何使用计算机的，因为AFAIK我不能将变量（如$index或$data）传递给计算机，因此计算出来的我知道要返回class的项目。

这种情况的适当绑定语法是什么，是否可能？

解决方案/解决方法

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

将字段名称更改为“class”以外的名称（如果您控制了源代码）。

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

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

或者，你可以使用attr:绑定而不是css:绑定，它似乎没有遇到同样的问题，并且可以使用名为'class'的成员，只要它们被封装在引用：

<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