Условное форматирование ячеек в KOGrid

Question

Я пытаюсь изменить цвет текста на основе числа, являющегося положительным или отрицательным в ячейке kogrid. Если число отрицательное, мне нужно, чтобы цвет текста был красным. Если число положительное, цвет текста должен быть зеленым.

Я думал, что использование атрибута cellClass для columndefs поможет, но, похоже, не работает.

Вот jsfiddle для неграмотных - http://jsfiddle.net/wood0615/Bug56/10/

Вот код модели представления:

 function mainVm(){
var self = this;

this.myData = ko.observableArray([{name: "Moroni", Balance: -50000},
                                  {name: "Tiancum", Balance: 4365},
                                  {name: "Jacob", Balance: -27677},
                                  {name: "Nephi", Balance: 29676},
                                  {name: "Enos", Balance: 3489}]);


this.gridOptions = { 
    data: self.myData, 
    columnDefs: [{ field: 'name', displayName: 'Client Name', width: 140 }, 
                 { field: 'Balance', displayName: 'Balance', width: 100,
                 cellClass: function (data) { return parseFloat(data) < 0 ? "text-negative" : "text-positive" }}
                ]};
 };

Код просмотра:

  <div class="gridStyle" data-bind="koGrid: gridOptions"></div>

CSS:

 .gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px; 
height: 300px;
}
.text-negative {
 color: #b94a48;
}
.text-positive {
 color: #468847;
}

Возможно, у меня неправильный синтаксис в атрибуте cellClass?

Answer 1

Ко принимает шаблон только как встроенную строку. Мне нравится оборачивать это так, чтобы вы указали только идентификатор шаблона. Это может быть сделано путем создания настраиваемого поля, такого как

CustomField = function(displayName, templateId) {
    this.displayName = displayName;
    this.cellTemplate = '<div data-bind="template: { name: \'' + templateId  + '\', data: $parent.entity }"></div>';
};

Тогда это просто вопрос использования стандартных шаблонов КО

http://jsfiddle.net/Bug56/12/