KoGrid 和可观察的属性

Question

我正在考虑使用 KoGrid，我花了一段时间才弄清楚如何使用可观察属性。我发现 wiki 页面 about custom templates 很有帮助，我必须使用 $parent.entity['editableField']。但是，我无法让 css 绑定工作。

请查看我的plunker 或下面根据他们的示例修改的副本。我可以打赌姓名和年龄会更改为 observable，但第一行第 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 绑定工作以将其更改为绿色？

Answer 1

我认为您使用的方法很好。

至于 css 绑定，尝试将所有年龄属性更改为可观察，然后将 css 绑定更改为：

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

请注意，我已添加 () 以从 observable 中获取值。

请注意，您也可以使用样式绑定来实现相同的目的：

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

这有点冗长，但您不需要使用单独的 css 类。

编辑：

这是一个example fiddle，展示了如何使用computed observable 来提供更复杂的逻辑