MVVM - 将 JSON 子元素绑定到 Kendo UI 控件

Question

我想将子节点绑定到两个不同的剑道 ui 控件，但是我的剑道数据源在一次调用中从服务中获取数据，

var viewModel = kendo.observable {
 dataSource : new kendo.data.DataSource({
    transport: {
        read: {
            url: '/data/auras',
            dataType: "json",
            type: 'GET',
        }
    },
    schema: {
      /////////
    },   
 });
}

我的 JSON 响应结果如下所示

[
{
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "ppu": 0.55,
    "batters": {
        "batter": [
            {
                "id": "1001",
                "type": "Regular"
            },
            {
                "id": "1002",
                "type": "Chocolate"
            },
            {
                "id": "1003",
                "type": "Blueberry"
            },
            {
                "id": "1004",
                "type": "Devil's Food"
            }
        ]
    },
    "topping": [
        {
            "id": "5001",
            "type": "None"
        },
        {
            "id": "5002",
            "type": "Glazed"
        },
        {
            "id": "5005",
            "type": "Sugar"
        },
        {
            "id": "5007",
            "type": "Powdered Sugar"
        },
        {
            "id": "5006",
            "type": "Chocolate with Sprinkles"
        },
        {
            "id": "5003",
            "type": "Chocolate"
        },
        {
            "id": "5004",
            "type": "Maple"
        }
    ]
}    

]

这里我必须将batter（是子元素）绑定到一个Gridview && topping（是子元素）到另一个Gridview，

Answer 1

您可以使用schema.parse 将您的 JSON 结果拆分为两个列表。比如：

var batters = new kendo.data.DataSource({
    data: []
});

var toppings = new kendo.data.DataSource({
    data: []
});

var allData = new kendo.data.DataSource({
    transport: {
        read: {
            url: '/data/auras',
            dataType: "json",
            type: 'GET',
        }
    },
    schema: {
        parse: function (data) {
            batters.data(data[0].batters.batter);
            toppings.data(data[0].toppings);
            return data;
        }
    },   
 });

allData.fetch();

var viewModel = kendo.observable({
    batters: batters,
    toppings: toppings
});