我正在尝试编写一个动态代码来跨页面使用淘汰赛。为此，我有一个 common.js 文件，它具有所有必需的功能。但是对于过滤器功能，因为它每页不同，我将它写在 index.cshtml 文件中。我为过滤而编写的代码，如果我把它放在 common.js 中，它可以正常工作，但如果我把它放在 index.cshtml 文件中，它不会过滤数据。我为它创建了一个 JSFiddle，但由于某种原因它没有正确显示。相同的链接是http://jsfiddle.net/maulikk2000/FGkKx/。所以，我的问题是我在这里做错了什么。我在这里只放 JS 代码，因为 index.cshtml 代码有点不可读。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");
}
}]
});
};
}