Uncaught TypeError: grid.sortedData.peek (...). Фильтр не является функцией

Question

Я пытаюсь выполнить подкачку с помощью KnockoutJs KOGrid. Я после этого: http://knockout-contrib.github.io/KoGrid/#paging

данные, которые я передаю в мою модель представления (ВМ) содержит пары следующего:

Моего Нокаут вид модели выглядит следующим образом:

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 
    }; 
}; 

Энди мой 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 неперехваченного TypeError:. Grid.sortedData.peek (...) фильтр не является функция

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

Если я осмотрю sortedData свойство сетки объекта выглядит нормально:

последняя строка из моих выколотки ViewModel JS для выполнения является self.myData (pagedData); в пределах это.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> 

Где я ошибся?

Answer 1

Вы правильно указав ko.observableArray свойство (myData) в качестве data параметра gridOptions объекта, однако вы должны убедиться, что он всегда содержит массив JavaScript.

Нокаут не «набирает тип», что вы помещаете в ko.observableArray, поэтому вам нужно убедиться, что вы всегда используете массивы.

Однако в вашем setPagingData вы пытаетесь присвоить объект вашей myData вместо массива, и это выдает эту ошибку:

Uncaught TypeError: grid.sortedData.peek(...).filter is not a function

, так как обычный 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); 
    }; 

Sidenote: Ваша текущая реализация не делает правильной стороне сервера подкачки. Поскольку вы не передаете какие-либо параметры серверу и обрабатываете возвращенные данные на стороне клиента.