Multiple Signals
With Reef, you can create components that use data from multiple reactive signals.
// Create multiple reactive signals
let data = signal({
heading: 'My Todos',
emoji: '👋🎉'
});
let todos = signal(['Swim', 'Climb', 'Jump', 'Play']);
// Create a template
function template () {
let {heading, emoji} = data;
return `
<h1>${heading} ${emoji}</h1>
<ul>
${todos.map(function (todo) {
return `<li id="${todo.toLowerCase().replaceAll(' ', '-')}">${todo}</li>`;
}).join('')}
</ul>`;
}
// Create a reactive component
component('#app', template);
If your signals use custom namespaces, pass them in as an array of signals names with the options.signals property.
// Create multiple named signals
let data = signal({
heading: 'My Todos',
emoji: '👋🎉'
}, 'heading');
let todos = signal(['Swim', 'Climb', 'Jump', 'Play'], 'todos');
// ...
// Create a reactive component with multiple named signals
component('#app', template, {signals: ['heading', 'todos']});