Question

我尝试使用KnockoutJs KOGrid进行分页工作。我一直在关注此事：http://knockout-contrib.github.io/KoGrid/#paging

我传入视图模型的数据（vm param）包含以下内容：

我的淘汰视图模型如下：

function ViewModel(vm) {
    var self = this;
    this.myData = ko.observableArray([]);

    this.rows = ko.observableArray(vm.Rows);

    this.deleteInvisibleColumns = function () {
        for (var i = 0; i < vm.Rows.length; i++) {
            var row = vm.Rows[i];

            var keys = Object.keys(row);
            for (var k = 0; k < keys.length; k++) {
                if (vm.VisibleColumns.indexOf(keys[k]) === (-1)) {
                    delete row[keys[k]];
                };
            };
        };
    };  

    self.deleteInvisibleColumns();

    this.filterOptions = {
        filterText: ko.observable(""),
        useExternalFilter: true
    };

    this.pagingOptions = {
        pageSizes: ko.observableArray([2, 500, 1000]),
        pageSize: ko.observable(2),
        totalServerItems: ko.observable(0),
        currentPage: ko.observable(1)     
    };

    this.setPagingData = function(data, page, pageSize){    
        var pagedRows = data.Rows.slice((page - 1) * pageSize, page * pageSize);
        var pagedData = { Rows: pagedRows, VisibleColumns: data.VisibleColumns };

        self.myData(pagedData);
        self.pagingOptions.totalServerItems(data.Rows.length);
    };

    this.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $.getJSON('/SampleData/GetDataPage', function (returnedPayload) {
                    data = returnedPayload.filter(function (item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    self.setPagingData(data,page,pageSize);
                });          
            } else {
                $.getJSON('/SampleData/GetDataPage', function (returnedPayload) {
                    self.setPagingData(returnedPayload, page, pageSize);
                });
            }
        }, 100);
    };

    self.filterOptions.filterText.subscribe(function (data) {
        self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
    });   

    self.pagingOptions.pageSizes.subscribe(function (data) {
        self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
    });
    self.pagingOptions.pageSize.subscribe(function (data) {
        self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
    });
    self.pagingOptions.totalServerItems.subscribe(function (data) {
        self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
    });
    self.pagingOptions.currentPage.subscribe(function (data) {
        self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
    });

    self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage());

    this.gridOptions = {
        data: self.myData,
        enablePaging: true,
        pagingOptions: self.pagingOptions,
        filterOptions: self.filterOptions
    };  
};

Andy我的HTML（Asp.Net MVC Razor视图）是：

@model ESB.BamPortal.Website.Models.SampleDataViewModel
@using System.Web.Script.Serialization
@{
    ViewBag.Title = "Sample Data";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>@ViewBag.Title</h2>
@{  string data = new JavaScriptSerializer().Serialize(Model); }

<div id="Knockout" data-bind="koGrid: gridOptions">
</div>



@section Scripts {
    <script src="~/KnockoutVM/SampleData.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Content/KoGrid.css">
    <script type="text/javascript">
        var vm = new ViewModel(@Html.Raw(data));
        ko.applyBindings(vm, document.getElementById("Knockout"));
    </script>
}

当页面加载时，从kogrid.js Uncaught TypeError：grid.sortedData.peek（...）中抛出以下错误。过滤器不是函数

self.evalFilter = function () {
        if (searchConditions.length === 0) {
            grid.filteredData(grid.sortedData.peek().filter(function(item) {

如果我检查 grid 对象的 sortedData 属性，它看起来没问题：

要执行的knockout viewmodel js的最后一行是 this.SetPagingData 函数中的 self.myData（pagedData）; 。

使用Fiddler我从服务器的响应中提取了以下内容：

<script type="text/javascript">
        var vm = new ViewModel({"Rows":[{"SampleDataId":1,"Manufacturer":"Ford","Model":"Escort","Style":"Hatch"},{"SampleDataId":2,"Manufacturer":"Vauxhall","Model":"Cavalier","Style":"Saloon"},{"SampleDataId":3,"Manufacturer":"Rover","Model":"Montego","Style":"Saloon"},{"SampleDataId":4,"Manufacturer":"Ford","Model":"Escort","Style":"Hatch"},{"SampleDataId":5,"Manufacturer":"Vauxhall","Model":"Cavalier","Style":"Saloon"},{"SampleDataId":6,"Manufacturer":"Rover","Model":"Montego","Style":"Saloon"},{"SampleDataId":7,"Manufacturer":"Opel","Model":"Monza","Style":"Coupe"},{"SampleDataId":8,"Manufacturer":"BMW","Model":"325i","Style":"Saloon"},{"SampleDataId":9,"Manufacturer":"Ford","Model":"Escort","Style":"Hatch"},{"SampleDataId":10,"Manufacturer":"Vauxhall","Model":"Cavalier","Style":"Saloon"},{"SampleDataId":11,"Manufacturer":"Rover","Model":"Montego","Style":"Saloon"},{"SampleDataId":12,"Manufacturer":"Opel","Model":"Monza","Style":"Coupe"},{"SampleDataId":13,"Manufacturer":"BMW","Model":"325i","Style":"Saloon"},{"SampleDataId":14,"Manufacturer":"Ford","Model":"Escort","Style":"Hatch"},{"SampleDataId":15,"Manufacturer":"Vauxhall","Model":"Cavalier","Style":"Saloon"},{"SampleDataId":16,"Manufacturer":"Rover","Model":"Montego","Style":"Saloon"},{"SampleDataId":17,"Manufacturer":"Opel","Model":"Monza","Style":"Coupe"},{"SampleDataId":18,"Manufacturer":"BMW","Model":"325i","Style":"Saloon"},{"SampleDataId":19,"Manufacturer":"Ford","Model":"Escort","Style":"Hatch"},{"SampleDataId":20,"Manufacturer":"Vauxhall","Model":"Cavalier","Style":"Saloon"},{"SampleDataId":21,"Manufacturer":"Rover","Model":"Montego","Style":"Saloon"},{"SampleDataId":22,"Manufacturer":"Opel","Model":"Monza","Style":"Coupe"},{"SampleDataId":23,"Manufacturer":"BMW","Model":"325i","Style":"Saloon"}],"VisibleColumns":[]});
        ko.applyBindings(vm, document.getElementById("Knockout"));
    </script>

我哪里出错了？

Answer 1

您正在将ko.observableArray属性（myData）正确指定为data对象的gridOptions参数，但是您必须确保它始终包含一个JavaScript数组。

Knockout不会＆＃34;类型检查＆＃34;您放入ko.observableArray的内容，因此您需要确保始终使用数组。

但是，在您的setPagingData中，您尝试将对象分配给myData而不是数组，这会引发此错误：

Uncaught TypeError：grid.sortedData.peek（...）。filter不是函数

因为普通的JavaScript对象litaral没有filter函数。

修复非常简单，只需将pagedData.Rows作为myData的值传递：

this.setPagingData = function(data, page, pageSize){    
        var pagedRows = data.Rows.slice((page - 1) * pageSize, page * pageSize);
        var pagedData = { Rows: pagedRows, VisibleColumns: data.VisibleColumns };

        self.myData(pagedData.Rows);
        self.pagingOptions.totalServerItems(data.Rows.length);
    };

旁注：您当前的实现没有进行正确的服务器端分页。因为您没有将任何参数传递给服务器，而是在客户端处理返回的数据。

未捕获的TypeError：grid.sortedData.peek（...）。filter不是函数

1 个答案: