以编程方式创建 Polymer 元素答案

【问题标题】：Programmatically create Polymer elements以编程方式创建 Polymer 元素
【发布时间】：2014-08-31 11:09:55
【问题描述】：

我有一个现有的应用程序（使用画布标签的游戏），我想尝试使用 PolymerDart 为其创建 UI 元素（想想设置屏幕、与游戏中角色的对话交互等）。

我正在尝试使基本点击计数器示例正常工作。我的 index.html 看起来像：

<html>
  <head>
    <title>PraxisClient</title>
    <script async type="application/dart" src="app.dart"></script>
    <script async src="packages/browser/dart.js"></script>
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="app/elements/click_counter.html">
  </head>
  <body>
    <div id="ui">
    </div>
  </body>
</html>

在我的应用程序中，我尝试使用以下方法创建元素：

querySelector('#ui').children.add(new Element.tag('click-counter'));

点击计数器代码与https://www.dartlang.org/polymer/#data-binding给出的示例完全相同

<link rel="import" href="../packages/polymer/polymer.html">
<polymer-element name="click-counter">
  <template>
    <button on-click="{{increment}}">Click Me</button>
    <p>You clicked the button {{count}} times.</p>
  </template>
  <script type="application/dart" src="click_counter.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('click-counter')
class ClickCounterElement extends PolymerElement {
  @observable int count = 0;

  ClickCounterElement.created() : super.created();

  void increment(Event e, var detail, Node target) {
    count += 1;
  }
}

我得到的错误是：

URL 必须由 Dart 主脚本导入：click_counter.dart

但是，即使我将 click_counter.dart 导入到我的应用程序中，它似乎也无济于事，我只是在 dom 中看到了标签，并且没有执行任何代码。

如果我向元素 (<polymer-element noscript>) 添加“noscript”属性，那么我会看到模板显示（但没有执行任何代码）。

【问题讨论】：

这是布局的截图。我想我遵循这些约定：richardson.co.nz/layout.png
好的，但是你应该得到一个警告。
很好。将其添加到我的答案中。

标签： dart dart-polymer

【解决方案1】：

在pubspec.yaml 中，Polymer 变压器配置需要每个入口页面都有一个入口

transformers:
- polymer:
    entry_points:
    - web/index.html

pub serve 应在缺少此配置时创建警告。

<html>
  <head>
    <title>PraxisClient</title>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="app/elements/click_counter.html">
  </head>
  <body>
    <div id="ui">
    </div>
    <!-- moved down and removed the `async` attribute 
         these things get modified anyway when you run `pub build`
         if you want to have customized behavior you need to do it
         in a custom transformer or in the build output (as far as I know) -->
    <script type="application/dart" src="app.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

改变

<link rel="import" href="../packages/polymer/polymer.html">

到

<link rel="import" href="../../packages/polymer/polymer.html">

【讨论】：