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

时间:2014-09-28 10:51:12

标签: mvvm kendo-ui

我想将子节点绑定到两个不同的kendo ui控件,但我的Kendo Data源在单个调用中从服务中获取数据,

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(是子元素)绑定到One Gridview&& topping(是子元素)到另一个Gridview,

1 个答案:

答案 0 :(得分:0)

您可以使用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
});