elemento - reduce javascript
Unkeught TypeError: grid.sortedData.peek(...).filter no es una función (1)
Está especificando correctamente una propiedad ko.observableArray ( myData ) como parámetro de data del objeto gridOptions , sin embargo, debe asegurarse de que siempre contenga una matriz de JavaScript.
Knockout no "verifica el tipo" de lo que ko.observableArray en un ko.observableArray por lo que debes asegurarte de que siempre usas matrices.
Sin embargo, en su setPagingData intenta asignar un objeto a su myData lugar de una matriz , y esto arroja este error:
UnEught TypeError: grid.sortedData.peek (...). Filter no es una función
porque un objeto de JavaScript litaral no tiene una función de filter .
La solución es bastante sencilla, solo necesita pasar pagedData.Rows como el valor de 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);
};
Nota: su implementación actual no hace una paginación apropiada del lado del servidor. Porque no pasa ningún parámetro al servidor y procesa los datos devueltos en el lado del cliente.
Estoy intentando hacer que la búsqueda funcione con KnockoutJs KOGrid. He estado siguiendo esto: http://knockout-contrib.github.io/KoGrid/#paging
Los datos que paso a mi modelo de vista (el parámetro vm) contienen lo siguiente:
Mi modelo de vista directa es el siguiente:
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 mi html (Asp.Net MVC Razor view) es:
@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>
}
Cuando se carga la página, se lanza el siguiente error desde dentro de kogrid.js Unkeught TypeError: grid.sortedData.peek (...). Filter no es una función
self.evalFilter = function () {
if (searchConditions.length === 0) {
grid.filteredData(grid.sortedData.peek().filter(function(item) {
Si inspecciono la propiedad sortedData del objeto grid, se ve bien:
La última línea de mi jodida model viewmodel para ejecutar es self.myData (pagedData); dentro de la función this.SetPagingData .
Usando Fiddler saqué lo siguiente de la respuesta del servidor:
<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>
¿Qué hice mal?