Не удалось заставить KnockoutJS правильно работать с KendoUI ListView и KendoPager.

Я пытаюсь разбить на страницы с помощью KendoUI ListView и KendoUI Pager с KnockoutJS. Создание ListView работает просто отлично. Проблема в том, чтобы заставить пейджер работать.

Я использую нокаут-kendo.js привязки.

Вот HTML-код:

<div data-bind="kendoListView: {  dataSource: { data:fruits ,pageSize:2 }, data: fruits, 
template: template, pageable:true, selectable:'single', change: function(evt){ selectedId
(evt.sender.dataSource.view()[evt.sender.select().index()].id) } }" ></div>

<div id="pager" class="k-pager-wrap" data-bind="kendoPager: { dataSource: {  
data:fruits ,pageSize:2 } }"> </div>
<hr/>
<hr/>
Selected Id: <strong data-bind="text: selectedId"> </strong>
<hr/>

Вот код javascript:

var ViewModel = function () {
    var self = this;
    self.template = '<div>#= name #</div>';
    self.fruits = ko.observableArray([
    { id: "1", name: "apple", },
    { id: "2", name: "orange",},
    { id: "3", name: "banana",},
    { id: "4", name: "pear",}
]);

    // this kinda of works by showing the navigation bar, but navigation doesn't work
    //$("#pager").kendoPager({
    //    dataSource: self.fruits()
    //});

    self.selectedId = ko.observable();
    self.selectedChoice = ko.computed(function () {
        var id = self.selectedId();
        if (id) {
            return ko.utils.arrayFirst(self.fruits(), function (fruit) {
                return fruit.id == id;
            });
        }
    }, this);
};

ko.applyBindings(new ViewModel());

Я искал низко и высоко, но не смог найти ничего о попытке заставить эти два виджета работать вместе с помощью Knockoutjs. Любая помощь приветствуется.

Вот ссылка jsfiddle: http://jsfiddle.net/camde/WN57W/2/


knockout.js knockout-kendo
person Cam    schedule 05.10.2013    source источник
comment
У вас это сработало?   -  person David    schedule 22.02.2016

Ответы (1)


arrow_upward
0
arrow_downward

Примечание. Прежде всего, вам необходимо добавить следующую привязку к файлу Knockout-kendo.js.

createBinding({
 name: "kendoPager",
 defaultOption: DATA,
 watch: {
    data: function(value, options) {
        ko.kendo.setDataSource(this, value, options);
    }
 }
});

Создайте источник данных кендо, как показано ниже, в вашей модели представления,

var mediaDataSource = new kendo.data.DataSource({
            data: fruits ,
            pageSize: 2
});

И Предоставьте сведения об источнике данных для пейджера и представления списка. например ниже:

<div id="mediaList" data-bind="kendoListView: {
    data: fruits,
    dataSource: yourdatasource,
    pageable: true, 
    selectable: 'single'
    }"></div>
<div id="pager" class="k-pager-wrap" data-bind="kendoPager: { data: fruits, dataSource: yourdatasource}">
person abhijoseph    schedule 12.12.2013
comment
Я полагаю, что вопрос был без использования kendo.data.datasource... возможно ли это? - person David; 22.02.2016
comment
По-моему, нет, нигде не упоминается об использовании kendo.data.datasource. - person abhijoseph; 21.10.2016