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>
<template id="template-example" is="template-e6d">
<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>$textinterp</p>
<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>
<select data-e6d-value="$selectval">
<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="four">4</option>
</select>
@@ -29,9 +29,7 @@
</div>
</div>
<section id="template-add">
</section>
<section id="template-add"></section>
<script>
document.getElementById(`template-example`).addEventListener(`e6d-error`, console.log);
@@ -49,7 +47,9 @@
dynamicInterp: document.getElementById(`text-interp`).value,
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>
</main>
src/template/template-e6d.js
+14 -7
View File
@@ -51,9 +51,12 @@ class TemplateE6d extends HTMLTemplateElement {
const bindAttr = [];
const bindEvent = [];
let bindContent = false;
let ref = null;
if (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 = [];
node.getAttribute(attr).matchAll(eventRegex).forEach(f => matches.push(f));
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!
allRoutes.push({
route: trail,
ref,
bind: {
attr: bindAttr,
event: bindEvent,
@@ -121,13 +125,10 @@ class TemplateE6d extends HTMLTemplateElement {
connectedCallback() {
}
bind(obj) {
bind(obj = {}) {
this.preprocess();
const templated = document.importNode(this.content, true);
if (!obj) {
return templated;
}
const resolve = (root, route) => {
let ptr = root;
@@ -162,8 +163,14 @@ class TemplateE6d extends HTMLTemplateElement {
return result;
};
const references = {};
for (const route of this.bindRoute) {
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) {
const attrValue = templateString(attr.template, obj);
if (attr.func) {
@@ -188,7 +195,7 @@ class TemplateE6d extends HTMLTemplateElement {
}
}
return templated;
return [templated, references,];
}
}