Dynamic 在index.cshtml文件中删除JS过滤器功能

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


        });


    };

}

函数CreateGrid（gridId、itemObject、pageSize、initializeFilterByItems、dataItems）{
var self=这个；
self.gridId=gridId；
self.itemObjectArray=ko.observableArray（ko.utils.arrayMap）（数据项，函数（数据）{
返回新的itemObject（数据）；
}));
self.pageSize=ko.可观察（pageSize）；
self.pageIndex=ko.可观察（1）；
self.prevPageIndex=ko.可观察（1）；
self.selectedItem=ko.observable（）；
self.itemForEditing=ko.observable（）；
initializeFilterByItems（self.itemObjectArray）；
self.stringStartsWith=函数（项，startsWith）{
项目=项目| |“”；
if（startsWith.length>item.length）返回false；
返回项.substring（0，startsWith.length）==startsWith；
};
self.templateouse=函数（项）{
var item1=self.selectedItem（）；
var template=item==item1？'editTmpl'：'itemsTmpl'；
返回模板；
};
self.pagedList=ko.computed（函数（）{
var size=self.pageSize（）；
var start=（self.pageIndex（）-1）*大小；
var itemsToReturn=this.filteredItems？this.filteredItems:self.itemObjectArray；
//返回self.filteredItems.slice（开始，开始+大小）；
returnitemstoreturn.slice（开始，开始+大小）；
});
self.maxPageIndex=ko.computed（函数（）{
返回Math.ceil（self.itemObjectArray（）.length/self.pageSize（））；
});
self.totalItems=ko.computed（函数（）{
返回self.itemObjectArray（）.length；
});
self.previousPage=函数（）{
if（self.pageIndex（）>1）{
self.pageIndex（self.pageIndex（）-1）；
self.prevPageIndex（self.pageIndex（））；
}
};
self.nextPage=函数（）{
if（self.pageIndex（））这是我们需要处理的大量代码。如果您缩小问题范围，创建一个，并告诉我们您试图解决的问题，这会有所帮助。嗨，Jeroen，感谢您的回复。我可以理解有很多代码需要处理，但我的主要目的是更好地理解。我的主要问题是model.filteredItems调用。它从上面fiddle链接的HTML代码中的第160行开始。我想根据Id和描述字段中键入的值筛选列表。目前，我的网格绑定到javascript部分第43行的self.PagedList方法。我试图为大多数功能创建一个通用代码，但筛选功能不可用页面特定。希望这能有所帮助，MaulikHi，我已经删除了很多不必要的代码来解决JSFIDLE链接上的这个问题。现在它更清晰了，也更容易理解。很好！但是，我认为它不起作用，因为仍然有一些100 sloc的问题。（注意，你可以随时改进它。）