Knockoutjs - 根据数组中的值设置 CSS 类

Question

这是我正在处理的 html 表：

  <tbody data-bind="foreach: xusers.list">
      <tr data-bind="css:{'approved-false' : member()==1 }">
        <td data-bind="text: member"></td>
        <td data-bind="text: expired"></td>
        <td data-bind="text: name"></td>
        <td data-bind="text: email"></td>
      </tr>
   </tbody>

数组项成员的值在表中显示得很好，但无论我尝试什么语法，我的 css 调用都不起作用。如果成员为真（成员包含 1 或 0），我只想应用此类。

我错过了什么？

附加代码 - 我是否覆盖 observable？...这里是唯一写入数组的地方。

if (!data) {
   ...
} 
else {
    if (data.length) {
        var curItem;
        for (var i=0; i<data.length; i++) {
            curItem = new xuser();
            curItem.name = data[i].name;
            curItem.email = data[i].email;
            curItem.city = data[i].city;
            curItem.region = data[i].region;
            curItem.country = data[i].country;
            curItem.expires = data[i].expires;
            curItem.member = data[i].member;
            curItem.expired = data[i].expired;
            xusers.list.push(curItem)
            totalRecs = data[i].TotalCount;
        }
    }
} // if (!data)/else

Answer 1

你很接近，只是落后了：见http://knockoutjs.com/documentation/css-binding.html

<tbody data-bind="foreach: xusers.list">
  <tr data-bind="css:{'approved-false': member() == 1 }">
    <td data-bind="text: member"></td>
    <td data-bind="text: expired"></td>
    <td data-bind="text: name"></td>
    <td data-bind="text: email"></td>
  </tr>
</tbody>

您还覆盖了您的 observables，见下文（假设 curItem 上的所有字段都是 observables，根据需要更新您自己的）：

if (!data) {
   ...
} 
else {
    if (data.length) {
        var curItem;
        for (var i=0; i<data.length; i++) {
            curItem = new xuser();
            curItem.name(data[i].name);
            curItem.email(data[i].email);
            curItem.city(data[i].city);
            curItem.region(data[i].region);
            curItem.country(data[i].country);
            curItem.expires(data[i].expires);
            curItem.member(data[i].member);
            curItem.expired(data[i].expired);
            xusers.list.push(curItem)

            // this should probably be somewhere else
            totalRecs = data[i].TotalCount; 
        }
    }
} // if (!data)/else