Question

我正在尝试使用KnockoutJS对KendoUI ListView和KendoUI寻呼机进行分页。 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/

Answer 1

注意：首先，您必须将以下绑定添加到knockout-kendo.js文件

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

在viewmodel

中创建如下所示的kendo数据源

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

无法让KnockoutJS与KendoUI ListView＆amp; KendoPager

1 个答案: