ページ間でノックアウトを使用する動的コードを作成しようとしています。そのために、必要な機能をすべて備えた common.js ファイルを用意しました。ただし、ページごとに異なるフィルター機能については、 index.cshtml ファイルに記述しています。フィルタリング用に書いたコードは、common.js に入れると正常に動作しますが、index.cshtml ファイルに入れるとデータがフィルタリングされません。そのための JSFiddle を作成しましたが、何らかの理由で正しく表示されません。同じリンクはhttp://jsfiddle.net/maulikk2000/FGkKx/です。だから、私の質問は、私がここで間違っていることです。index.cshtml コードが少し読めなくなるので、ここに JS コードだけを入れます。jsfiddle ( $.getJSON) の index.cshtml の下部にあるコメント行は、私の実際のコードです。
function CreateGrid(gridId, itemObject, pageSize, initializeFilterByItems, dataItems) {
var self = this;
self.gridId = gridId;
self.itemObjectArray = ko.observableArray(ko.utils.arrayMap(dataItems, function (data) {
return new itemObject(data);
}));
self.pageSize = ko.observable(pageSize);
self.pageIndex = ko.observable(1);
self.prevPageIndex = ko.observable(1);
self.selectedItem = ko.observable();
self.itemForEditing = ko.observable();
initializeFilterByItems(self.itemObjectArray);
self.stringStartsWith = function (item, startsWith) {
item = item || "";
if (startsWith.length > item.length) return false;
return item.substring(0, startsWith.length) === startsWith;
};
self.templateToUse = function (item) {
var item1 = self.selectedItem();
var template = item === item1 ? 'editTmpl' : 'itemsTmpl';
return template;
};
self.pagedList = ko.computed(function () {
var size = self.pageSize();
var start = (self.pageIndex() - 1) * size;
var itemsToReturn = this.filteredItems ? this.filteredItems : self.itemObjectArray;
//return self.filteredItems.slice(start, start + size);
return itemsToReturn.slice(start, start + size);
});
self.maxPageIndex = ko.computed(function () {
return Math.ceil(self.itemObjectArray().length / self.pageSize());
});
self.totalItems = ko.computed(function () {
return self.itemObjectArray().length;
});
self.previousPage = function () {
if (self.pageIndex() > 1) {
self.pageIndex(self.pageIndex() - 1);
self.prevPageIndex(self.pageIndex());
}
};
self.nextPage = function () {
if (self.pageIndex() <= self.maxPageIndex()) {
self.pageIndex(self.pageIndex() + 1);
self.prevPageIndex(self.pageIndex());
}
};
self.firstPage = function () {
self.pageIndex(1);
self.prevPageIndex(1);
};
self.lastPage = function () {
self.pageIndex(self.maxPageIndex());
self.prevPageIndex(self.maxPageIndex());
};
self.pageIndex.subscribe(function (item) {
if (item) {
var jumpToPage = parseInt(item);
if (jumpToPage <= self.maxPageIndex()) {
self.pageIndex(jumpToPage);
self.prevPageIndex(jumpToPage);
} else {
self.pageIndex(self.prevPageIndex());
}
}
});
self.allPages = ko.computed(function () {
var pages = [];
for (var i = 1; i <= self.maxPageIndex(); i++) {
pages.push({
pageNumber: (i + 1)
});
}
return pages;
});
self.moveToPage = function (index) {
self.pageIndex(index);
};
self.selectItem = function (item) {
self.selectedItem(item);
self.itemForEditing(new itemObject(ko.toJS(item)));
};
self.acceptItem = function (item) {
var validationError = ko.validation.group(item);
var vlength = validationError().length;
if (vlength == 0) {
var selected = self.selectedItem(),
edited = self.itemForEditing();
var currentdate = new Date();
var datetime = currentdate.getFullYear() + "-" + (currentdate.getMonth() + 1) + "-" + currentdate.getDate() + " " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() + "." + currentdate.getMilliseconds();
item.Date_Last_Updated(datetime);
var id = selected.ContractorServiceId();
ajaxUpdate(updateItemUrl + id, ko.toJSON(item), function () {
edited.update(selected);
self.selectedItem(null);
self.itemForEditing(null);
},
function (errorText) {
alert(errorText);
selected.update(edited);
});
} else {
}
};
self.revertItem = function (item) {
var selected = self.selectedItem(),
edited = ko.toJS(self.itemForEditing());
selected.update(edited);
self.selectedItem(null);
self.itemForEditing(null);
};
self.remove = function (item) {
if (confirm("Are you sure you want to delete " + " '" + item.ContractorServiceDescription() + "'??")) {
var itemId = item.ContractorServiceId();
ajaxDelete(deleteItemUrl + itemId, function () {
self.itemObjectArray.remove(item);
},
function (errorMessage) {
alert(errorMessage);
});
}
};
self.getAll = function () {
self.itemObjectArray.removeAll();
$.getJSON(readItemUrl, function (services) {
$.each(services, function (index, service) {
self.itemObjectArray.push(new itemObject(service));
});
});
};
self.add = function () {
var data = {};
data.ContractorServiceId = "enter new id here";
data.ContractorServiceDescription = "enter new description here";
var newItem = new itemObject(data);
self.selectedItem(newItem);
$("#contractorServiceDialog").dialog({
width: 420,
buttons: [{
text: 'Save',
"class": 'commonButtonStyle',
"autofocus": this,
click: function () {
var validationError = ko.validation.group(self.selectedItem());
var vlength = validationError().length;
if (vlength != 0) {
} else {
$(this).dialog("close");
var item = self.selectedItem();
ajaxAdd(addItemUrl, ko.toJSON(item), function () {
self.getAll();
},
function (errorText) {
alert(errorText);
});
}
}
}, {
text: "Cancel",
"class": 'commonButtonStyle',
click: function () {
self.itemObjectArray.remove(newItem); // We need to remove this otherwise it'll appear on the last page...
$(this).dialog("close");
}
}]
});
};
}