javascript – HTML5 / webcomponents：从模板代码调用原型函数
作者：互联网
我正在为我正在创建的单个页面应用程序中使用(或不使用)Web组件进行一些测试.
以下是该问题的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<template id="aTemplate">
<div style="border:1px solid red">
<p>text <input type="text"></p>
<button>ClickMe</button>
</div>
</template>
<script>
var Proto = Object.create(HTMLElement.prototype);
Proto.createdCallback = function () {
var t = document.querySelector('#aTemplate');
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
};
Proto.aFunction = function() {
alert("proto " + "text value?");
}
document.registerElement('x-proto', {prototype: Proto});
var ProtoChild = Object.create(Proto);
ProtoChild.createdCallback = function () {
Proto.createdCallback.call(this)
};
ProtoChild.aFunction = function() {
alert("child " + "text value?");
}
document.registerElement('x-proto-child', {
prototype: Proto
});
</script>
<x-proto></x-proto>
<x-proto-child></x-proto-child>
</body>问题是我找不到在按钮(模板内)中设置“onclick”处理程序的方法,该处理程序在使用原型创建的对象中调用方法“aFunction”.应该在正确的对象实例中调用该方法,可以访问内部DOM组件以及原型中的属性和函数.
我已经尝试了很多东西,(在构造之后绑定事件,使用JS或JQuery,使用创建的/附加的回调,a)但是我没有想法.
提前致谢.
编辑：
感谢MinusFour的答案.这条线：
06001
在我试图做的事情中,无论如何,导致(与JQuery相同,用于测试兼容性)：
06002
“bind”使得“this”AKA成为容器,完整的组件,JS代码中提供的,我需要的东西.
这是完成的最终示例,有人可能会发现它有用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<template id="aTemplate">
<div style="border:1px solid darkgray;padding:10px;margin: 10px;">
<h2 class="theCaption"></h2>
<p>text <input class="theText" type="text"></p>
<button class="showButton">Show val</button>
<button class="closeButton">Close</button>
</div>
</template>
<script>
// The .bind method from Prototype.js
if (!Function.prototype.bind) { // check if native implementation available
Function.prototype.bind = function () {
var fn = this, args = Array.prototype.slice.call(arguments),
object = args.shift();
return function () {
return fn.apply(object,
args.concat(Array.prototype.slice.call(arguments)));
};
};
}
function createProto() {
$("#spawnPoint").append("<x-proto x-caption='proto'></x-proto>");
}
function createChild() {
$("#spawnPoint").append("<x-proto-child x-caption='a child of proto'></x-proto-child>");
}
var Proto = Object.create(HTMLElement.prototype);
Object.defineProperty(Proto, "x-caption", {value: "no caption"});
Proto.createdCallback = function () {
var t = document.querySelector('#aTemplate');
var clone = document.importNode(t.content, true);
this.shadowRoot = this.createShadowRoot();
this.shadowRoot.appendChild(clone);
$(clone).children("div").append("<p>ssss</p>")
this.showButton = this.shadowRoot.querySelector('.showButton');
this.closeButton = this.shadowRoot.querySelector('.closeButton');
this.shadowRoot.querySelector('.theCaption').textContent = $(this).attr("x-caption");
this.theText = this.shadowRoot.querySelector('.theText');
$(this.showButton).on("click", this.aFunction.bind(this));
$(this.closeButton).on("click", this.close.bind(this));
};
Proto.aFunction = function () {
alert("in proto = " + $(this.theText).val());
}
Proto.close = function () {
$(this).detach();
}
document.registerElement('x-proto', {prototype: Proto});
var ProtoChild = Object.create(Proto);
ProtoChild.createdCallback = function () {
Proto.createdCallback.call(this);
};
ProtoChild.aFunction = function () {
alert("overrided in child = " + $(this.theText).val());
}
document.registerElement('x-proto-child', {
prototype: ProtoChild
});
</script>
<button onclick="javascript:createProto()">Create proto</button>
<button onclick="javascript:createChild()">Create child</button>
<div id="spawnPoint">
</div>
</body>解决方法:
我相信你可以从importedNode添加监听器(在你的情况下克隆).
clone.querySelector('button').addEventListener('click', function(){
//code logic here
});
你也可能意味着：
document.registerElement('x-proto-child', {
prototype: ProtoChild
});
这是它的样子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<template id="aTemplate">
<div style="border:1px solid red">
<p>text <input type="text"></p>
<button>ClickMe</button>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.14/webcomponents.min.js"></script>
<script>
var Proto = Object.create(HTMLElement.prototype);
Proto.createdCallback = function () {
var t = document.querySelector('#aTemplate');
var clone = document.importNode(t.content, true);
clone.querySelector('button').addEventListener('click', this.aFunction);
this.createShadowRoot().appendChild(clone);
};
Proto.aFunction = function() {
alert("proto " + "text value?");
}
document.registerElement('x-proto', {prototype: Proto});
var ProtoChild = Object.create(Proto);
ProtoChild.createdCallback = function () {
Proto.createdCallback.call(this);
console.log(this.template);
/*this.template.querySelector('button').addEventListener('click', function(){
console.log('child');
});*/
};
ProtoChild.aFunction = function() {
alert("child " + "text value?");
}
document.registerElement('x-proto-child', {
prototype: ProtoChild
});
</script>
<x-proto></x-proto>
<x-proto-child></x-proto-child>
</body>标签：javascript,html5,web-component 来源： https://codeday.me/bug/20190702/1357730.html