我正在尝试实施this site中的功能。但是当我点击x-foo元素时,我的代码没有提醒任何东西。这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
</head>
<body>
<script type="text/javascript">
var xFoo = document.createElement('x-foo');
var xFoo = new XFoo();
document.body.appendChild(xFoo);
xFoo.onclick=function(){alert("It works!")};
</script>
<x-foo>
Test
</x-foo>
</body>
</html>
有什么建议吗? (我在Chrome上)
答案 0 :(得分:1)
看起来您正在尝试创建自定义元素,但尚未注册。创建自己的XFoo元素看起来像这样:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Custom Element</title>
</head>
<body>
<!-- Create a template for the content inside your element -->
<template>
<h1>Hello from XFoo</h1>
</template>
<!-- Register your new element -->
<script>
var tmpl = document.querySelector('template');
var XFooProto = Object.create(HTMLElement.prototype);
XFooProto.createdCallback = function() {
var root = this.createShadowRoot();
root.appendChild(document.importNode(tmpl.content, true));
};
var XFoo = document.registerElement('x-foo', {
prototype: XFooProto
});
</script>
<!-- Use the element you've just registered as a tag -->
<x-foo></x-foo>
<!-- OR, create an instance using JavaScript -->
<script>
var el = document.createElement('x-foo');
document.body.appendChild(el);
</script>
</body>
</html>
不幸的是,这种方法依赖于当前仅在Chrome 34中提供的原生API。正如其他人提到的,创建自己的自定义元素的更简单方法是使用Polymer。 Polymer是一个库,它为所有现代浏览器添加了对Web组件(实质上是您正在构建的组件)的支持。这包括IE 10 +,Safari 6 +,Mobile Safari,当前的Chrome和当前的Firefox。
我把a jsbin which shows how to create your own x-foo
element using Polymer放在一起。
答案 1 :(得分:-1)
您应该尝试查看以下文章:
http://www.polymer-project.org/
这是一个开源的Github项目。我实际上尝试过这篇文章,但不推荐它。相反,请使用上面给出的链接。它使用Ajax和JSON。