0

我正在努力使用 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 示例。

关于我如何做到这一点的任何建议？

4

1 回答 1

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

现在与我原来的问题相比，这个片段有两个变化：

  1. children: "items"节点被添加到模式中
  2. 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"]);

也许它对未来的其他人有一些帮助......

于 2013-07-03T16:16:59.697 回答