javascript - 从现有的一个创建新的Kendo UI数据源

我有两个Kendo UI组合框，它们使用相同的后端数据，但是如果我对两个应用相同的Kendo UI DataSource，则在一个过滤器上进行过滤，第二个也要过滤（我不想发生）。

有什么方法可以将现有数据源的数据应用到新数据源中，以便节省一个服务调用。

    <select runat="server" id="combo1"></select>
    <select runat="server" id="combo2"></select>

  <script>
    var data = [
            { title: "Star Wars: A New Hope", year: 1977 },
            { title: "Star Wars: The Empire Strikes Back", year: 1980 },
            { title: "Star Wars: Return of the Jedi", year: 1983 }
    ];
    var DS1 = new kendo.data.DataSource({
            data: data
    });

    $("#combo1").kendoComboBox({
            placeholder: "Select",
            dataValueField: "year",
            dataTextField: "title",
            filter: "contains",
            dataSource: DS1
    });
    $("#combo2").kendoComboBox({
            placeholder: "Select",
            dataValueField: "year",
            dataTextField: "title",
            filter: "contains",
            dataSource: DS1
    });

  </script>

显示问题的JS bin：http://jsbin.com/likozaluci/edit?html,output

最佳答案

尝试这个：

var data = [
            { title: "Star Wars: A New Hope", year: 1977 },
            { title: "Star Wars: The Empire Strikes Back", year: 1980 },
            { title: "Star Wars: Return of the Jedi", year: 1983 }
    ];
    var DS1 = new kendo.data.DataSource({
            data: data
    });

    var DS2 = new kendo.data.DataSource({
            data: data
    });

    $("#combo1").kendoComboBox({
            placeholder: "Select",
            dataValueField: "year",
            dataTextField: "title",
            filter: "contains",
            dataSource: DS1
    });

    $("#combo2").kendoComboBox({
            placeholder: "Select",
            dataValueField: "year",
            dataTextField: "title",
            filter: "contains",
            dataSource: DS2
    });

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>

<select runat="server" id="combo1"></select>
<select runat="server" id="combo2"></select>
</body>
</html>