1

我有一个页面列出了多个项目，这些项目是可观察数组中的轻量级实体。使用 foreach 循环，我希望标签的 CSS 根据项目的状态而变化。
因为我使用的是breeze，所以我定义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(); 可观察值？

谢谢

4

1 回答 1

3

如果不查看其余代码，很难判断，但我认为您有上下文问题。您正在视图模型上定义计算的可观察对象，但您的代码有点假设它是在项目可观察数组中的每个对象上定义的。不是，所以你的第三行不能工作。它是在视图模型上定义的，它无法知道或跟踪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)"/>

您可以使用$rootor $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 模型代码中。

于 2013-09-22T00:38:02.763 回答