1

監視可能な配列の微風エンティティである複数のプロジェクトをリストするページがあります。foreach ループを使用して、プロジェクトの状況に応じてラベルの CSS を変更したいと考えています。
私は Breeze を使用しているためvar projects = ko.observableArray();、関連するエンティティ (projectStatus) からの値を含め、残りは私が定義し、breeze が処理します。foreach: projectsスタイルを設定しようとしている要素は、リスト内に存在し、バインディングがdata-bind="text: projectStatus().name. これは完全に機能します。ただし、CSS 値のビューモデルで計算されたオブザーバブルをコーディングすると、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

コードの残りの部分を見ないとわかりませんが、コンテキストに問題があると思います。ビューモデルで計算されたオブザーバブルを定義していますが、コードは、プロジェクトのオブザーバブル配列の各オブジェクトで定義されていると想定しています。そうではないので、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)"/>

ビューモデルの定義方法に応じて、$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 モデル コードに入れません。

于 2013-09-22T00:38:02.763 に答える