Mapping XML child elements to a Kendo UI DataSource

问题

I'm struggling with mapping and displaying a list of child elements on a XML datasource, using Kendo UI Mobile.

Consider the following straightforward XML structure:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<topics>
    <topic id="1" title="Weather">
        <header>Great weather today!</header>
        <smallicon>foo_bar.png</smallicon>
        <items>
            <item>It's great weather</item>
            <item>Sunny feeling</item>
            <item>Raining like a dog</item>
        </items>
    </topic>

    <topic id="2" title="Politics">
        <header>Left or right, take your pick!</header>
        <smallicon>whatever.png</smallicon>
        <items>
            <item>Making budget cuts</item>
            <item>How important is healthcare?</item>
        </items>
    </topic>
</topics>

Reading each single topic, and binding it to a view template, is in fact quite easy. Like so:

var template = kendo.template($("#home-tpl").html());

// hook up to the datasource "change" event; for auto-population
dataSource.bind("change", function(e) { 
    $("#home-menu").html(kendo.render(template, this.view()));
});

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "topics.xml", 
            dataType: "xml"
        }
    },
    schema: {
        type: "xml",
        data: "/topics/topic",
        model: {
            fields: {
                id: "@id",
                title: "@title",
                header: "header/text()",
                smallicon: "smallicon/text()",

                // > QUESTION: HOW TO MAP THIS?
                items: "???"
            }
        }
    }

dataSource.read();

This seems to blend just fine for the attributes and elements on the top level. I get a list of topics and I can bind them to a template using something like #: data.title #. This blends and no questions here.

However, I want to map the child elements for each <topic> as well. In the XML example this means the list of <items>. It's the "how-to-map-this-schema" part I'm puzzled on.

The eventual goal is to display a list of these sub-items, like for example in: #: data.items[0] #.

Also, I've tried a HierarchicalDataSource, but the regular DataSource seems to work just fine. Perhaps this would be a better fit? The Kendo API documentation doesn't seem to provide XML samples that have a nested hierarchy.

Any suggestions on how I can accomplish this?

回答1:

After some trial and error I came up with the following solution:

schema: {
    type: "xml",
    data: "/topics/topic",
    model: {
        fields: {
            id: "@id",
            title: "@title",
            header: "header/text()",
            smallicon: "smallicon/text()",

            // > ANWER: THIS IS HOW
            children: "items"
        },
        hasChildren: "items"
    }
}

Now there are two changes in this snippet in comparison to my original question:

The children: "items" node is added to the schema
The hasChildren: "items" property

With this in place, everything worked out well and the hierarchical structure was mapped just nicely. As a bonus, I'm now able to do the following:

        // fetch the one, single topic from the datasource
        topic = dataSource.Topics.get(topicId);

        // read the inner contents, e.g. text, from a single <items> node
        log(topic.children.item[0]["#text"]);

Perhaps it's of some help to others in the future...

来源：https://stackoverflow.com/questions/17381847/mapping-xml-child-elements-to-a-kendo-ui-datasource

标签

kendo-ui

kendo-mobile