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

元の質問と比較して、このスニペットには2つの変更があります。

  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 に答える