Question

我有一个列出多个项目的页面，这些项目是可观察数组中的breeze实体。使用foreach循环，我希望标签的CSS根据项目的状态而变化因为我正在使用breeze，所以我定义了var projects = ko.observableArray();，breeze负责其余部分，包括来自相关实体（projectStatus）的值。对于我尝试设置的元素，它存在于foreach: projects列表中，并具有data-bind="text: projectStatus().name的绑定。这非常有效。但是，当我在viewmodel中为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);

所以我的问题是，我应该如何引用项目（）。projectStatus（）。name（）;可观察的价值？

由于

Answer 1

在没有看到其余代码的情况下很难说，但我认为你有一个上下文问题。您正在视图模型上定义计算的observable，但您的代码有点假设它是在项目可观察数组中的每个对象上定义的。它不是，所以你的第三行不能工作。它是在视图模型上定义的，它无法知道或跟踪您引用的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模型代码中添加样式信息。

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

1 个答案: