-1

我正在尝试实现此站点的功能。但是当我单击 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 上）

4

2 回答 2

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。

我整理了一个 jsbin，它展示了如何使用 Polymer 创建自己的x-foo元素。

于 2014-03-07T22:20:52.487 回答
-1

您应该尝试查看以下文章：

http://www.polymer-project.org/

这是一个开源的 Github 项目。我实际上尝试过那篇文章，但不推荐它。相反，请使用上面给出的链接。它使用 Ajax 和 JSON。

于 2014-03-03T16:01:50.810 回答