Hi.
I want to display a form with a recursive hierarchy, such as folders and files.
<App>
<JavaScript>
module.exports = {
root: [
{ file:"file0" },
{ file:"file1" },
{ folder: [
{ file:"file2" },
{ file:"file3" }
]
}
]
};
</JavaScript>
<StackPanel ux:Class="Folder">
<object ux:Property="Path"/>
<Each Items="{Property Path}">
<WhileEmpty Items="{folder}">
<Text Value="{file}"/>
</WhileEmpty>
<WhileNotEmpty Items="{folder}">
<Text>--sub folder--</Text>
<Folder Path="{folder}"/>
</WhileNotEmpty>
</Each>
</StackPanel>
<StackPanel>
<Folder Path="{root}"/>
</StackPanel>
</App>
When I ran the above file I got an exception.
Process is terminated due to StackOverflowException.
Can you tell me what I did wrong?
There is probably a reference loop in your code. For this usecase you should try <Match><Case /></Match>
. It has the right facilities for this. Take a look at this example:
<App>
<JavaScript>
function file(name) {
return new entry("file", name, null);
}
function dir(name,entries) {
return new entry("dir", name, entries);
}
function entry(type,name,entries) {
this.type = type;
this.name = name;
if (entries)
this.entries = entries;
}
module.exports = {
root: new dir("root", [
new file("file0"),
new file("file1"),
new dir("subdir", [
new file("file2"),
new file("file3"),
new file("file4"),
new dir("subdir", [
new dir("subdir", [
new file("file2"),
new file("file3"),
new file("file4"),
])
])
])
])
};
</JavaScript>
<StackPanel>
<Each ux:Class="DirUnpack">
<Match Value="{type}">
<Case String="file">
<Text Value="{name}" />
</Case>
<Case String="dir">
<StackPanel>
<Text Value="{name}"/>
<StackPanel Margin="10,0,0,0">
<DirUnpack Items="{entries}" />
</StackPanel>
</StackPanel>
</Case>
</Match>
</Each>
<DirUnpack Items="{root.entries}" />
</StackPanel>
</App>
Hi!
You can’t use a <Folder>
directly within the ux:Class="Folder"
, you can only use that inside a template, for example inside an <Each>
.
You an also use
<Each Items="{something}" MatchKey="type">
<Folder ux:Template="folder">...</Folder>
<File ux:Template="file">...</File>
This will instantiate either File
or Folder
based on the type
property on the data object, for example { foo: "bar", type: "folder" }
will create a Folder
This works fine.
Thank you!