// * Creating some API to fetch table data using Ajax requests
// ... etc
-(function () {
+define("knockout.simpleGrid",["jquery","order!utils","i18n","order!knockout"], function() {
+ (function () {
- ko.simpleGrid = {
- // Defines a view model class you can use to populate a grid
- viewModel: function (configuration) {
- this.data = configuration.data;
- this.currentPageIndex = ko.observable(0);
- this.pageSize = configuration.pageSize || 5;
- this.columns = configuration.columns;
- this.itemsOnCurrentPage = ko.computed(function () {
- var startIndex = this.pageSize * this.currentPageIndex();
- return this.data.slice(startIndex, startIndex + this.pageSize);
- }, this);
+ ko.simpleGrid = {
+ // Defines a view model class you can use to populate a grid
+ viewModel: function (configuration) {
+ this.data = configuration.data;
+ this.currentPageIndex = ko.observable(0);
+ this.pageSize = configuration.pageSize || 5;
+ this.columns = configuration.columns;
- this.maxPageIndex = ko.computed(function () {
- return Math.ceil(ko.utils.unwrapObservable(this.data).length / this.pageSize);
- }, this);
- this.i18n=function(key){
- return $.i18n.prop(key);
- };
- this.gridUpdateCallBack = configuration.gridUpdateCallBack;
- this.pageLinksUpdateCallBack = configuration.pageLinksUpdateCallBack;
- }
- };
+ this.itemsOnCurrentPage = ko.computed(function () {
+ var startIndex = this.pageSize * this.currentPageIndex();
+ return this.data.slice(startIndex, startIndex + this.pageSize);
+ }, this);
- // Templates used to render the grid
- var templateEngine = new ko.jqueryTmplTemplateEngine();
+ this.maxPageIndex = ko.computed(function () {
+ return Math.ceil(ko.utils.unwrapObservable(this.data).length / this.pageSize);
+ }, this);
+ this.i18n=function(key){
+ return $.i18n.prop(key);
+ };
+ this.gridUpdateCallBack = configuration.gridUpdateCallBack;
+ this.pageLinksUpdateCallBack = configuration.pageLinksUpdateCallBack;
+ }
+ };
+ // Templates used to render the grid
+ var templateEngine = new ko.jqueryTmplTemplateEngine();
- // The "simpleGrid" binding
- ko.bindingHandlers.simpleGrid = {
- // This method is called to initialize the node, and will also be called again if you change what the grid is bound to
- update: function (element, viewModelAccessor, allBindingsAccessor) {
- var viewModel = viewModelAccessor(), allBindings = allBindingsAccessor();
- // Empty the element
- while(element.firstChild) {
- ko.removeNode(element.firstChild);
- }
+ // The "simpleGrid" binding
+ ko.bindingHandlers.simpleGrid = {
+ // This method is called to initialize the node, and will also be called again if you change what the grid is bound to
+ update: function (element, viewModelAccessor, allBindingsAccessor) {
+ var viewModel = viewModelAccessor(), allBindings = allBindingsAccessor();
- // Allow the default templates to be overridden
- var gridTemplateName = allBindings.simpleGridTemplate || "ko_usersGrid_grid",
- pageLinksTemplateName = allBindings.simpleGridPagerTemplate || "ko_simpleGrid_pageLinks";
+ // Empty the element
+ while(element.firstChild) {
+ ko.removeNode(element.firstChild);
+ }
- // Render the main grid
- var gridContainer = element.appendChild(document.createElement("DIV"));
- ko.renderTemplate(gridTemplateName, viewModel, { templateEngine: templateEngine }, gridContainer, "replaceNode")
- .subscribe(viewModel.gridUpdateCallBack?viewModel.gridUpdateCallBack:function(){});
+ // Allow the default templates to be overridden
+ var gridTemplateName = allBindings.simpleGridTemplate || "ko_usersGrid_grid",
+ pageLinksTemplateName = allBindings.simpleGridPagerTemplate || "ko_simpleGrid_pageLinks";
- if (viewModel.gridUpdateCallBack) viewModel.gridUpdateCallBack();
+ // Render the main grid
+ var gridContainer = element.appendChild(document.createElement("DIV"));
+ ko.renderTemplate(gridTemplateName, viewModel, { templateEngine: templateEngine }, gridContainer, "replaceNode")
+ .subscribe(viewModel.gridUpdateCallBack?viewModel.gridUpdateCallBack:function(){});
- // Render the page links
- var pageLinksContainer = $("#"+allBindings.pageLinksId).get(0);
- ko.renderTemplate(pageLinksTemplateName, viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode")
- .subscribe(viewModel.pageLinksUpdateCallBack?viewModel.pageLinksUpdateCallBack:function(){});
- if (viewModel.pageLinksUpdateCallBack) viewModel.pageLinksUpdateCallBack();
- }
- };
-})();
\ No newline at end of file
+ if (viewModel.gridUpdateCallBack) viewModel.gridUpdateCallBack();
+
+ // Render the page links
+ var pageLinksContainer = $("#"+allBindings.pageLinksId).get(0);
+ ko.renderTemplate(pageLinksTemplateName, viewModel, { templateEngine: templateEngine }, pageLinksContainer, "replaceNode")
+ .subscribe(viewModel.pageLinksUpdateCallBack?viewModel.pageLinksUpdateCallBack:function(){});
+ if (viewModel.pageLinksUpdateCallBack) viewModel.pageLinksUpdateCallBack();
+ }
+ };
+ })();
+
+})
\ No newline at end of file