如何使用计算函数在 foreach 可观察数组中指定 CSS 绑定

Question

我有一个页面列出了多个项目，这些项目是可观察数组中的轻量级实体。使用 foreach 循环，我希望标签的 CSS 根据项目的状态而变化。
因为我使用的是轻风，所以我定义了var projects = ko.observableArray();，而轻风负责其余的工作，包括来自相关实体 (projectStatus) 的值。 对于我要设置样式的元素，它存在于foreach: projects 列表中，并具有data-bind="text: projectStatus().name 的绑定。这完美地工作。但是，当我在视图模型中为 CSS 值编写计算出的 observable 时，它​​会在第 3 行（如下）引发未定义的错误。否则（我已经检查过）如果函数返回有效字符串，则该函数适用于 CSS：

    projectStatusStyle = ko.computed(function () {
    var x = "left label label-large label-info";

    var projStatus = projects().projectStatus().name();

    var style = "left label label-large label-"
    switch (projStatus) {
        case 'Live':
            x = style + "success";
            break;
        case 'Identified':
            x = style + "info";
            break;

        case 'In conversation':
            x = style + "purple";
            break;

        case 'Complete':
            x = style + "grey";
            break;
        case 'Unsuccessful':
            x = style + "yellow";
            break;

    }
    return x;
},vm);

所以我的问题是，我应该如何引用 projects().projectStatus().name();可观察值？

谢谢

Answer 1

如果不查看其余代码，很难判断，但我认为您遇到了上下文问题。您正在视图模型上定义计算的可观察对象，但您的代码有点假设它是在项目可观察数组中的每个对象上定义的。不是，所以你的第三行不能工作。它是在视图模型上定义的，它无法知道或跟踪您引用的 foreach 中的哪个项目。

您有几个选择。您可以将 projectStatusStyle 更改为视图模型上的一个函数，该函数将名称作为参数：

vm.projectStatusStyle = function (projStatusName) {
  var x = "left label label-large label-info";

  var style = "left label label-large label-"
  switch (projStatusName()) {
    case 'Live':
        x = style + "success";
        break;
    case 'Identified':
        x = style + "info";
        break;

    case 'In conversation':
        x = style + "purple";
        break;

    case 'Complete':
        x = style + "grey";
        break;
    case 'Unsuccessful':
        x = style + "yellow";
        break;

  }
  return x;
};

然后你可以有一个像

这样的绑定

<span data-bind="css: $root.projectStatusStyle(projectStatus().name)"/>

您可以使用$root 或$parent，具体取决于您的视图模型是如何定义的。

老实说，我可能会在你的 foreach 中这样做：

<span class="left label label-large"
  data-bind="css: {'label-info': projectStatus().name() === 'Identified', 
  'label-success': projectStatus().name() === 'Live', 
  'label-purple': projectStatus().name() === 'In conversation', 
  'label-grey': projectStatus().name() === 'Complete', 
  'label-yellow': projectStatus().name() === 'Unsuccessful'}"/>

这样您就不会将样式信息放入 JS 模型代码中。