Skip to content

Binding nested lists

Jump to bottom
Greg Bowler edited this page Feb 21, 2023 · 22 revisions

In the previous section, we saw how to add data-template attributes to HTML elements to use them in bindList operations, but we only ever saw examples using one dimensional data.

Depending on your development style, or how your database supplies the data, you may want to provide the DocumentBinder with data structures that contain the entire dataset, including lists that may contain nested lists.

As an example, let's use the example of a user's music collection. The dataset consists of a list of Artists. Each Artist has a list of Albums. Each Album has a list of tracks.

The HTML to display this could look like this:

<!doctype html>
<h1>Music library</h1>

<ul>
	<li data-template>
		<h2 data-bind:text>Artist name</h2>
		
		<ul>
			<li data-template>
				<h3 data-bind:text>Album name</h3>
				
				<ol>
					<li data-template data-bind:text>Track name</li>
				</ol>
			</li>
		</ul>
	</li>
</ul>

Here's an example PHP data structure:

$music = [
	"A Band From Your Childhood" => [
		"This Album is Good" => [
			"The Best Song You‘ve Ever Heard",
			"Another Cracking Tune",
			"Top Notch Music Here",
			"The Best Is Left ‘Til Last",
		],
		"Adequate Collection" => [
			"Meh",
			"‘sok",
			"Sounds Like Every Other Song",
		],
	],
	"Bongo and The Bronks" => [
		"Salad" => [
			"Tomatoes",
			"Song About Cucumber",
			"Onions Make Me Cry (but I love them)",
		],
		"Meat" => [
			"Steak",
			"Is Chicken Really a Meat?",
			"Don‘t Look in the Sausage Factory",
			"Stop Horsing Around",
		],
		"SnaxX" => [
			"Crispy Potatoes With Salt",
			"Pretzel Song",
			"Pork Scratchings Are Skin",
			"The Peanut Is Not Actually A Nut",
		],
	],
	"Crayons" => [
		"Pastel Colours" => [
			"Egg Shell",
			"Cotton",
			"Frost",
			"Periwinkle",
		],
		"Different Shades of Blue" => [
			"Cobalt",
			"Slate",
			"Indigo",
			"Teal",
		],
	]
];
function example(DocumentBinder $binder, array $musicData):void {
	$binder->bindList($musicData);
}

Next, learn how to bind tabular data into HTML tables.

PHP.Gt/DomTemplate is a separately maintained component of PHP.Gt/WebEngine.

Binding data

HTML functionality

More information

Clone this wiki locally