8

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

我传递到我的视图模型（vm 参数）的数据包含以下内容：

在此处输入图像描述

我的淘汰赛视图模型如下：

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(...).filter is not a function

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

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

在此处输入图像描述

我要执行的淘汰视图模型 js 的最后一行是self.myData(pagedData); 在this.SetPagingData函数中。

使用 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>

我哪里做错了？

4

1 回答 1

5

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

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

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

未捕获的类型错误：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);
    };

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

于 2016-03-15T20:15:59.700 回答