Question

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

请参阅我的plunker或下面的副本，该副本已从其示例中修改。我可以将名称和年龄改为可观察的，但第一行第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);

这是使用可观察属性的正确方法吗？
当满足该要求时，如何让css绑定工作以将其更改为绿色？

Answer 1

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

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

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

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

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

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

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

修改

以下是example fiddle，展示了如何使用computed observable提供更复杂的逻辑

KoGrid和可观察的属性

1 个答案: