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 サンプルが提供されていないようです。
これを達成する方法について何か提案はありますか?