Knockout-Kendo Header 模板绑定上下文答案

【问题标题】：Knockout-Kendo Header Template Binding ContextKnockout-Kendo Header 模板绑定上下文
【发布时间】：2014-10-13 12:27:29
【问题描述】：

对于我的一个 Kendo UI Grids，我为特定列指定了 headerTemplate。但是，模板中似乎没有任何绑定上下文。我绑定添加

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

到模板，但没有渲染任何内容。

在视图模型中使用网格配置

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 中的控件？

【问题讨论】：

标签： knockout-kendo

【解决方案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>"
    }]
};

【讨论】：