|
\`\`\`javascript |
|
const state = { pads: [{ label: "Kick" }, { label: "Snare" }, { label: "Hat" }] } |
|
\`\`\` |
|
|
|
**Parent creates children with data-index (pad-grid.js):** |
|
\`\`\`javascript |
|
export default (() => { |
|
let initialized = false |
|
return ({ state, refs }) => { |
|
if (initialized) return |
|
initialized = true |
|
refs.container.innerHTML = state.pads.map((_, i) => |
|
\`<pad-button data-index="\${i}"></pad-button>\` |
|
).join("") |
|
} |
|
}) |
|
\`\`\` |
|
|
|
**Child reads index, accesses state for its data (pad-button.js):** |
|
\`\`\`javascript |
|
export default (() => { |
|
return ({ state, refs, self }) => { |
|
const index = parseInt(self.dataset.index) |
|
const pad = state.pads[index] |
|
refs.label.textContent = pad.label // ← This WORKS. Render IS called. |
|
} |
|
}) |
|
\`\`\` |
Sorry you had to go through this, totally unfair ban. Wishing you luck in your future projects!
(feel free to close this issue, just wanted to express my support)
