How to display recursive structure?

How-to Discussions
1

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?

2

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

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

4

This works fine.
Thank you!