0

我正在尝试使用 KnockoutJS 使用 KendoUI ListView 和 KendoUI Pager 进行分页。ListView 的创建工作得很好。问题是试图让寻呼机工作。

我正在使用 knockout-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/

4

1 回答 1

0

注意：首先，您必须在 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}">
于 2013-12-12T05:57:49.407 回答