0

KoGridの使用を検討していますが、監視可能なプロパティの使用方法を理解するのに少し時間がかかりました。カスタムテンプレートに関するwikiページが役に立ち、使用する必要があることがわかりました$parent.entity['editableField']。ただし、cssバインディングを機能させることができません。

私のプランカーまたはその例から変更された以下のコピーを参照してください。名前と年齢を観察可能なものとして変更することはできますが、最初の行の2列目は緑色（年齢> 30）である必要があります。

function stringCellTemplateVM() {
    var self = this;
    this.selectedItems = ko.observableArray([]);
    this.myData = ko.observableArray([{ name: ko.observable("Moroni"), age: ko.observable(50) },
                     { name: "Tiancum", age: 43 },
                     { name: "Jacob", age: 27 },
                     { name: "Nephi", age: 29 },
                     { name: "Enos", age: 34 }]);
    this.gridOptions = { 
        data: self.myData,
        selectedItems: self.selectedItems,
        multiSelect: false,
        columnDefs: [{field: 'name', displayName: 'Name'},
                    {field: 'age', displayName: 'Age', cellTemplate:'<div data-bind="attr: { \'class\': \'kgCellText colt\' + $index()},css: { green: $parent.entity[\'age\'] > 30 }, html: $parent.entity[\'age\']"></div>'}]
    };

    this.increaseAge = function(){
      this.myData()[0].age(this.myData()[0].age()+1);
      //alert(this.myData()[0].age());
      //this.myData()[0].name(this.myData()[0].name() + this.myData()[0].age());
    };
}
var vm = new stringCellTemplateVM();
ko.applyBindings(vm);
  1. これは、観察可能なプロパティを操作する正しい方法ですか？
  2. その要件が満たされたときにcssバインディングを機能させて、それを緑色に変更するにはどうすればよいですか？
4

1 に答える 1

2

あなたが使っている方法は大丈夫だと思います。

cssバインディングについては、すべての年齢プロパティを観察可能に変更してから、cssバインディングを次のように変更してみてください。

css: { green: $parent.entity[\'age\']() > 30 }

()オブザーバブルから値を取得するために追加したことに注意してください。

スタイルバインディングを使用して同じことを実現することもできることに注意してください。

style: { backgroundColor: $parent.entity[\'age\']() > 30 ? \'green\' : \'\' }

これは少し長めですが、別のcssクラスを使用する必要はありません。

編集：

これは、計算されたオブザーバブルを使用してより複雑なロジックを提供する方法を示すフィドルの例です。

于 2013-03-14T19:46:49.360 に答える