将XML子元素映射到Kendo UI数据源 [英] Mapping XML child elements to a Kendo UI DataSource

问题描述

我正在努力使用Kendo UI Mobile在XML数据源上映射和显示子元素列表.

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

考虑以下简单的XML结构:

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();

这似乎很好地融合了顶层的属性和元素.我得到一个主题列表，可以使用诸如#: data.title #之类的东西将它们绑定到模板.这很有趣，这里没有问题.

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.

但是，我也想为每个<topic>映射子元素.在XML示例中，这表示<items>的列表.这是我不解的如何映射这种模式"部分.

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.

最终目标是显示这些子项目的列表，例如在#: data.items[0] #中.

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

此外，我尝试了 HierarchicalDataSource ，但是常规的DataSource似乎可以正常工作正好.也许这会更合适? Kendo API文档似乎没有提供具有嵌套层次结构的XML示例.

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?

推荐答案

经过反复试验，我提出了以下解决方案:

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:

1. 子代:项目" 节点已添加到架构中
2. 具有孩子:项目" 属性

1. The children: "items" node is added to the schema
2. 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...

这篇关于将XML子元素映射到Kendo UI数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！