녹아웃 - 검도 헤더 템플릿 바인딩 컨텍스트

Question

내 검도 UI 그리드 중 하나에 대해 특정 열에 대해 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에있는 컨트롤을 바인딩 할 사용하여 뷰 모델로 구성되어있다?

Answer 1

표 머리에서 녹아웃 바인딩을 제거한 다음 그리드의 databound 이벤트에 리 바인딩 할 수 있습니다. 여기

는 예를 보여줍니다 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>" 
    }] 
};