无法让 KnockoutJS 与 KendoUI ListView 和 KendoPager 正常工作

Question

我正在尝试使用KendoUI ListView和KendoUI Pager与KnockoutJS进行分页。 列表视图的创建工作正常。 问题是试图让寻呼机工作。

我正在使用敲除剑道.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/

Answer 1

注意：首先，您必须将以下绑定添加到 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}">