2

在<ul>foreach 绑定中，我希望淘汰赛为每个<li>.

我绑定的对象如下所示：

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

我希望淘汰赛将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。

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

解决方案/解决方法

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

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

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

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

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

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

1 回答 1

1

这应该工作：

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

我认为您遇到了关键字问题class。 工作 jsfiddle。

于 2012-12-04T03:12:17.950 回答