javascript - Kendo - 更改数据源 onclick

Question

我有一个关于更改 Kendo 中的数据源的问题。

目前我的数据源和剑道列表视图如下所示：

var DSOne = new kendo.data.DataSource({
        dataType: 'json',
        transport: {
            read:
            {
                url: DS_URL_1,
                type: "GET",
                xhrFields: { withCredentials: true },
                crossDomain: true
            }
        },
        pageSize: 9,
        serverPaging: false
    });

    var DSTwo = new kendo.data.DataSource({
        dataType: 'json',
        transport: {
            read:
            {
                url: DS_URL_2,
                type: "GET",
                xhrFields: { withCredentials: true },
                crossDomain: true
            }
        },
        pageSize: 9,
        serverPaging: false
    });

    var viewModel = kendo.observable({
        apps: DSOne
    });

    kendo.bind(jQuery('#listViewID'), viewModel);

    $("#pager").kendoPager({
        dataSource: DSOne
    });

我想要做的是，当我单击一个按钮来更改 viewModel 和寻呼机的数据源时，以便将新数据加载到#listViewID

Answer 1

这是viewmodel和js。这只会以一种方式改变它，但如果需要，您应该能够从这里推断。

在这个小提琴中行动

var viewModel = kendo.observable({
    DSOne: new kendo.data.DataSource({
        data:[
            {id:1, name:'Bob'},
            {id:2, name:'Tom'},
            {id:3, name:'Carol'},
            {id:4, name:'Ann'}
        ],
        pageSize: 2,
        serverPaging: false
    }),
    DSTwo: new kendo.data.DataSource({
        data:[
            {id:5, name:'Dan'},
            {id:6, name:'Mark'},
            {id:7, name:'Al'},
            {id:8, name:'Lisa'},
            {id:9, name:'Eric'},
        ],
        pageSize: 2,
        serverPaging: false
    }),
    changeDataSource: function(e) {
        e.preventDefault();
        var listView = $("#listview").data('kendoListView')
            listView.setDataSource(viewModel.get('DSTwo'));
        var pager =$("#pager").kendoPager({dataSource: viewModel.get('DSTwo')}).data('kendoPager')

    }
});

kendo.bind(jQuery('#container'), viewModel);

$("#listview").kendoListView({
    dataSource: viewModel.get('DSOne'),
    template:" #=name#"
});

$("#pager").kendoPager({
    dataSource: viewModel.get('DSOne')
});