Nested Components + events?

[Israel Casillas Jr]

How should nested components work in v12? I was using the previous version with .html() nested components.

[Chris Ferdinandi]

Hi @ICJR - no nesting components in version 12. If you want to modularize your HTML, you can use templates.

let {store, component} = reef;

// Create a reactive store
let todos = store(['Swim', 'Climb', 'Jump', 'Play']);

function getTodo (todo) {
	return `<li>${todo}</li>`;
}

// Create a template
function template () {
	return `
		<h1>Todos</h1>
		<ul>
			${todos.map(function (todo) {
				return getTodo(todo);
			}).join('')}
		</ul>`;
}

// Create a reactive component
// It automatically renders into the UI
component('#app', template);

// Automatically adds a new list item to the UI
todos.push('Take a nap... zzzz');