me/html-e6d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ref binding

Browse Source 
* This will allow template-e6d users to also autobind references within
  their template for any more specific post-binding logic without
  risking ID conflicts.
This commit is contained in:
Piper
2026-08-16 16:52:11 +02:00
parent 3b93bbc44e
commit 8a95e0f98a
2 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/template/example.html
+6 -6
View File
@@ -5,7 +5,7 @@
<body> <body>
<template id="template-example" is="template-e6d"> <template id="template-example" is="template-e6d">
<div> <div>
<h2>Easy template</h2> <h2 data-e6d-ref="h2">Easy template</h2>
<p class="class-a class-b $class">Here's some text $textinterp interpolation, and some dynamic "$dynamicInterp".</p> <p class="class-a class-b $class">Here's some text $textinterp interpolation, and some dynamic "$dynamicInterp".</p>
<p>$textinterp</p> <p>$textinterp</p>
<button title="$title" data-e6d-event-click="click buttonclick">A button with tooltip and onclick $textinterpfunc</button> <button title="$title" data-e6d-event-click="click buttonclick">A button with tooltip and onclick $textinterpfunc</button>
@@ -13,7 +13,7 @@
<label>This should autoselect to 3</label> <label>This should autoselect to 3</label>
<select data-e6d-value="$selectval"> <select data-e6d-value="$selectval">
<option value="one">1</option> <option value="one">1</option>
<option value="two">2</option> <option data-e6d-ref="opt1" value="two">2</option>
<option value="three">3</option> <option value="three">3</option>
<option value="four">4</option> <option value="four">4</option>
</select> </select>
@@ -29,9 +29,7 @@
</div> </div>
</div> </div>
<section id="template-add"> <section id="template-add"></section>
</section>
<script> <script>
document.getElementById(`template-example`).addEventListener(`e6d-error`, console.log); document.getElementById(`template-example`).addEventListener(`e6d-error`, console.log);
@@ -49,7 +47,9 @@
dynamicInterp: document.getElementById(`text-interp`).value, dynamicInterp: document.getElementById(`text-interp`).value,
selectval: `three`, selectval: `three`,
}); });
document.getElementById(`template-add`).appendChild(bind); document.getElementById(`template-add`).appendChild(bind[0]);
bind[1].h2.innerText = `Updated via Reference`;
bind[1].opt1.innerText = `Ref Update`;
}; };
</script> </script>
</main> </main>
src/template/template-e6d.js
+14 -7
View File
@@ -51,9 +51,12 @@ class TemplateE6d extends HTMLTemplateElement {
const bindAttr = []; const bindAttr = [];
const bindEvent = []; const bindEvent = [];
let bindContent = false; let bindContent = false;
let ref = null;
if (node.getAttributeNames) { if (node.getAttributeNames) {
for (const attr of node.getAttributeNames()) { for (const attr of node.getAttributeNames()) {
if (attr.indexOf(`data-e6d-event-`) >= 0) { if (attr === `data-e6d-ref`) {
ref = node.getAttribute(attr);
} else if (attr.indexOf(`data-e6d-event-`) >= 0) {
const matches = []; const matches = [];
node.getAttribute(attr).matchAll(eventRegex).forEach(f => matches.push(f)); node.getAttribute(attr).matchAll(eventRegex).forEach(f => matches.push(f));
if (matches.length === 1 && matches[0].length === 3) { if (matches.length === 1 && matches[0].length === 3) {
@@ -89,10 +92,11 @@ class TemplateE6d extends HTMLTemplateElement {
} }
} }
if (bindAttr.length !== 0 || bindEvent.length !== 0 || bindContent) { if (bindAttr.length !== 0 || bindEvent.length !== 0 || bindContent || ref !== null) {
// Add a leaf! // Add a leaf!
allRoutes.push({ allRoutes.push({
route: trail, route: trail,
ref,
bind: { bind: {
attr: bindAttr, attr: bindAttr,
event: bindEvent, event: bindEvent,
@@ -121,13 +125,10 @@ class TemplateE6d extends HTMLTemplateElement {
connectedCallback() { connectedCallback() {
} }
bind(obj) { bind(obj = {}) {
this.preprocess(); this.preprocess();
const templated = document.importNode(this.content, true); const templated = document.importNode(this.content, true);
if (!obj) {
return templated;
}
const resolve = (root, route) => { const resolve = (root, route) => {
let ptr = root; let ptr = root;
@@ -162,8 +163,14 @@ class TemplateE6d extends HTMLTemplateElement {
return result; return result;
}; };
const references = {};
for (const route of this.bindRoute) { for (const route of this.bindRoute) {
const injectTarget = resolve(templated, route.route); const injectTarget = resolve(templated, route.route);
if (route.ref) {
references[route.ref] = injectTarget;
injectTarget.removeAttribute(`data-e6d-ref`);
}
for (const attr of route.bind.attr) { for (const attr of route.bind.attr) {
const attrValue = templateString(attr.template, obj); const attrValue = templateString(attr.template, obj);
if (attr.func) { if (attr.func) {
@@ -188,7 +195,7 @@ class TemplateE6d extends HTMLTemplateElement {
} }
} }
return templated; return [templated, references,];
} }
} }