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

Question

我想将子节点绑定(bind)到两个不同的剑道 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"
        }
    ]
}    

]

在这里，我必须将面糊(是子元素)绑定(bind)到一个 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
});