Knockout.JS サイト ( http://jsfiddle.net/rniemeyer/QSRBR/ ) の Paged Grid Sample を使用してグリッドを構築しています。以下のように、グリッド テンプレート内でクリック イベントを宣言しました (クリック: goBackward) :-
templateEngine.addTemplate("ko_negrid_navigation", "\
<div class=\"ko-grid-pageLinks\">\
<br/>\
<span><img src=\"/OCSENET/images/bluLeftNew.gif\" style=\"cursor:hand;\" alt=\"Backward\" data-bind='click: goBackward, visible: shouldShowBack' /></span>\
<span> </span>\
<span><img src=\"/OCSENET/images/bluRightNew.gif\" style=\"cursor:hand;\" alt=\"Forward\" data-bind='click: goForward, visible: shouldShowFwd' /></span>\
</div>");
ここで、このグリッド ビュー モデル自体ではなく、このグリッド ビューモデルを呼び出すビューモデル内で、この goBackward メソッドを定義する必要があります。これを行うと、イベントは goBackward() をトリガーしません。以下のように、別の TestViewModel からグリッドを呼び出しています。
/*----------------------------------------------------------------------*/
/* TEST View Model
/*----------------------------------------------------------------------*/
function TESTViewModel() {
var self = this;
self.iRowFrom = ko.observable(1);
self.iRowTo = ko.observable(5);
self.gridRowCount = ko.observable(5);
self.VM_AHISGrid;
self.GridItems = ko.observableArray([]);
//fnDesignGrid
self.fnDesignGrid = function () {
self.VM_AHISGrid = new ko.NEGrid.viewModel({
data: self.GridItems,
columns: [
{ headerText: "Address", rowText: "AHIS_Address" },
{ headerText: "City", rowText: "AHIS_Addr_City" },
{ headerText: "State", rowText: "AHIS_Addr_State" },
{ headerText: "Zip", rowText: "AHIS_Addr_Zip" }
],
pageSize: self.gridRowCount(),
gridName: 'ALST_NE_GRID'
});
}
// I want this method to be triggered.
self.goBackward = function () {
alert('I m Backward')
};
}