0

我正在考虑使用 KoGrid，我花了一段时间才弄清楚如何使用可观察的属性。我发现关于自定义模板的 wiki 页面很有帮助，我必须使用$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);
  1. 这是使用可观察属性的正确方法吗？
  2. 当满足该要求时，如何使 css 绑定工作以将其更改为绿色？
4

1 回答 1

2

我认为他们使用的方法很好。

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

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

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

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

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

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

编辑：

这是一个示例小提琴，展示了如何使用计算出的 observable来提供更复杂的逻辑

于 2013-03-14T19:46:49.360 回答