将 XML 子元素映射到 Kendo UI 数据源答案

【问题标题】：Mapping XML child elements to a Kendo UI DataSource将 XML 子元素映射到 Kendo UI 数据源
【发布时间】：2013-06-29 15:39:46
【问题描述】：

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

考虑以下简单的 XML 结构：

<?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>

阅读每个主题，并将其绑定到视图模板，实际上非常容易。像这样：

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 # 之类的东西将它们绑定到一个模板。这混合在一起，这里没有问题。

但是，我也想为每个 <topic> 映射 子元素。在 XML 示例中，这意味着 <items> 的列表。这是我感到困惑的“如何映射这个模式”部分。

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

另外，我尝试了HierarchicalDataSource，但常规的 DataSource 似乎工作得很好。也许这会更合适？ Kendo API 文档似乎没有提供具有嵌套层次结构的 XML 示例。

关于我如何实现这一点的任何建议？

【问题讨论】：

标签： kendo-ui kendo-mobile

【解决方案1】：

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

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"
    }
}

现在这个 sn-p 与我原来的问题相比有两个变化：

children: "items" 节点已添加到架构中
hasChildren: "items" 属性

有了这个，一切都很顺利，层次结构映射得很好。作为奖励，我现在可以执行以下操作：

        // 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"]);

也许对以后的其他人有些帮助……

【讨论】：