Контекст привязки шаблона заголовка нокаута-кендо

Question

Для одной из моих гридов Kendo UI я указал шаблон заголовка для определенного столбца. Тем не менее, в шаблоне нет никакого связующего контекста. Я связал добавление

<span data-bind='text: ko.toJSON($data)'></span> 

к шаблону, но ничего не отображалось.

Сетка настраивается в ViewModel с помощью

self.gridConfig = { 
    data: self.Transactions, 
    height: 350, 
    pageable: { 
     pageSize: 5 
    }, 
    useKOTemplates: true, 
    rowTemplate: "exportRowTemplate", 
    columns: [{ 
     title: "Policy Number", 
     width: 120 
    }, { 
     title: "Insured Name", 
     width: 250 
    }, { 
     title: "Effective Date", 
     width: 120, 
     format: "{0:MM/dd/yyyy}" 
    }, { 
     title: "Transaction Type", 
     width: 150 
    }, { 
     title: "Premium", 
     format: "{0:c2}", 
     width: 120 
    }, { 
     headerTemplate: "<strong>Select</strong><span style='margin-left: 10px'><input type='checkbox' data-bind='checked: checkAllValue' /></span><span data-bind='text: ko.toJSON($data)'></span>" 
    }] 
}; 

Как связать элемент управления, который находится в HeaderTemplate?

Answer 1

Вы можете сделать это, удалив привязку нокаута с головы таблицы и затем перевязав ее на событие привязки данных сетки.

Вот JSFiddle, который показывает пример: http://jsfiddle.net/ek1qkxth/

Все, что вам нужно сделать, чтобы исправить ваш, чтобы добавить это к вашим настройкам gridConfig:

dataBound: function (e) { 
    var header = e.sender.thead[0]; 
    ko.cleanNode(header); 
    ko.applyBindings(self, header) 
} 

Здесь в вашем gridConfig:

self.gridConfig = { 
    data: self.Transactions, 
    height: 350, 
    pageable: { 
     pageSize: 5 
    }, 
    useKOTemplates: true, 
    rowTemplate: "exportRowTemplate", 
    dataBound: function (e) { 
     var header = e.sender.thead[0]; 
     ko.cleanNode(header); 
     ko.applyBindings(self, header) 
    }, 
    columns: [{ 
     title: "Policy Number", 
     width: 120 
    }, { 
     title: "Insured Name", 
     width: 250 
    }, { 
     title: "Effective Date", 
     width: 120, 
     format: "{0:MM/dd/yyyy}" 
    }, { 
     title: "Transaction Type", 
     width: 150 
    }, { 
     title: "Premium", 
     format: "{0:c2}", 
     width: 120 
    }, { 
     headerTemplate: "<strong>Select</strong><span style='margin-left: 10px'><input type='checkbox' data-bind='checked: checkAllValue' /></span><span data-bind='text: ko.toJSON($data)'></span>" 
    }] 
};