template 模板绑定

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：2826
发帖：230 篇
来自：保密
注册：2023-12-09 09:36:49
造访：2026-05-05 13:56:22

[ 第 1 楼 ] 177

self.mock = { icon: "http://bbs.fengyun.org/Upload/JsAspBBS/2204/01/112044.461.jpg", nick: "测试" };

class ListItem extends HTMLElement {
	constructor() { super(); if(this.getAttribute("is")) this.bind(self.mock || 0); }

bind(data) {
		var tempid = this.getAttribute("is") || this.dataset.tempid;
		var node = document.getElementById(tempid).content.cloneNode(true);
		var expr = str => new Function("data", "with(data) { return " + str + "; }");
		node.querySelectorAll("[data-if]").forEach(x => {
			var show = false;
			try { show = expr(x.dataset["if"])(data); }
			catch(err) { console.log("data-if: " + x.dataset["if"] + ":", err.message); }
			if(!show) x.remove();
			else if("else" in ((x.nextElementSibling || 0).dataset || {})) x.nextElementSibling.remove();
		});
		var setAttr = str => node.querySelectorAll(`[data-${str}]`).forEach(x => {
			var pro = { "class": "className", "style": "cssText", "html": "innerHTML" };
			var tag = str == "style" ? x.style : x;
			try { tag[str in pro ? pro[str] : str] = expr(x.dataset[str])(data); }
			catch(err) { console.log(`data-${str}:` + x.dataset[str] + ":", err.message); }
		});
		setAttr("class"); setAttr("style"); setAttr("href"); setAttr("src");
		setAttr("checked"); setAttr("disabled"); setAttr("html");
		var attr = { IMG: "src", INPUT: "value", TEXTAREA: "value", "SELECT": "value" };
		node.querySelectorAll("[data-fld]").forEach(x => {
			x[ attr[ x.tagName ] || "innerHTML" ] = data[x.dataset.fld];
		});
		if(this.onbind) this.onbind(node);
		if(this.dataset.shadow == "no") return this.appendChild(node);
		this.attachShadow({ mode: this.dataset.mode || "closed" }).append(node);
	}
}
customElements.define('list-item', ListItem);
</script>

[您可以先修改代码再运行]

2024-04-06 19:40:32

IP：已设置保密

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：2826
发帖：230 篇
来自：保密
注册：2023-12-09 09:36:49
造访：2026-05-05 13:56:22

[ 第 2 楼 ] 178

数据绑定的例子：

<div class="replies" style="width: 4in; background-color: #def; overflow: auto"></div>

<template id="reply">
<style type="text/css">
:host{ display: block; margin: 3mm; background-color: #fff; padding: 2mm }
.fr{ float: right }
.icon{ float: left; width: 2cm; height: 2cm; border-radius: 1cm; object-fit: cover }
.info{ margin-left: 22mm; min-height: 2cm }
.info .nick{ margin: 0mm; border-bottom: 1px solid #abcdef; padding: 2mm 4mm }
.info .content{ margin: 0mm; padding: 2mm 4mm }
</style>
<div>
	<img class="icon fl" datafld="icon" />
	<div class="info">
		<input class="btn fr" type="button" value="事件测试" onclick="getRootNode().host.showData()" />
		<p class="nick" datafld="nick"></p>
		<div class="reply">
			<p class="content" datafld="reply"></p>
		</div>
	</div>
</div>
</template>
<script type="text/javascript">
var rs = [
	{ icon: "http://bbs.fengyun.org/Upload/JsAspBBS/2204/01/112044.461.jpg", nick: "Rimifon", reply: "大家好，我来了！" },
	{ icon: "http://bbs.fengyun.org/Upload/JsASPBBS/2203/30/142552.795.jpg", nick: "Guest", reply: "你好，我也来了。" },
	{ icon: "http://bbs.fengyun.org/Upload/JsASPBBS/2203/30/142617.159.jpg", nick: "欢乐马", reply: "我是第三个来访的，大家欢迎。" }
];

var replies = document.querySelector(".replies");
rs.forEach(x => {
	var li = document.createElement("reply-item");
	li.setAttribute("is", "reply");
	replies.appendChild(li);
	li.showData = () => alert(JSON.stringify(x));
	setTimeout(() => li.bind(x), 0);
});

// 自定义组件
class ReplyItem extends HTMLElement {
	constructor() {
		super()
	}

bind(data) {
		var tempid = this.getAttribute("is");
		var node = document.getElementById(tempid).content.cloneNode(true);
		var temp = node.querySelectorAll("[datafld]");
		var attr = { IMG: "src", INPUT: "value", TEXTAREA: "value" };
		temp.forEach(x => {
			x[ attr[ x.tagName ] || "innerHTML" ] = data[x.getAttribute("datafld")];
		});
		this.attachShadow({mode: "closed"}).append(node);
	}
}
customElements.define('reply-item', ReplyItem);
</script>

[您可以先修改代码再运行]

关于事件中访问绑定数据这块，用到了 getRootNode().host 来实现 reply-item 数据的关联访问。

2024-04-06 19:41:15

IP：已设置保密