以编程方式创建聚合物元素

塞缪尔

我有一个现有的应用程序(使用canvas标签的游戏​​),我想尝试使用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”属性,则可以看到显示了模板(但未执行任何代码)。

贡特·佐赫鲍尔(GünterZöchbauer)

pubspec.yaml聚合物变压器配置中,每个条目页面都需要一个条目

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">

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Dart中以编程方式创建聚合物Elements

来自分类Dev

如何动态创建聚合物元素

来自分类Dev

动态创建聚合物元素

来自分类Dev

您如何以编程方式将标记添加到聚合物Google Map元素

来自分类Dev

聚合物-在聚合物元素内部显示元素

来自分类Dev

聚合物造型元素

来自分类Dev

转换聚合物元素

来自分类Dev

聚合物-如何创建具有绑定的元素

来自分类Dev

如何用聚合物镖重复创建<select>元素

来自分类Dev

如何动态创建聚合物元素\简单标签

来自分类Dev

飞镖聚合物更新聚合物dom元素

来自分类Dev

飞镖聚合物更新聚合物dom元素

来自分类Dev

在聚合物纸输入中以编程方式突出显示文本

来自分类Dev

聚合物1.0-如何以编程方式更改字体大小?

来自分类Dev

获取聚合物父元素

来自分类Dev

选择元素(聚合物1.0)

来自分类Dev

聚合物特性不在元素中

来自分类Dev

如何使用聚合物元素

来自分类Dev

调试聚合物纸元素

来自分类Dev

去除飞镖中的聚合物元素

来自分类Dev

YUIDocs解析聚合物元素

来自分类Dev

聚合物-更新元素

来自分类Dev

聚合物-造型纸张输入元素

来自分类Dev

聚合物的纸元素和角材料

来自分类Dev

结合聚合物元素和角钢

来自分类Dev

聚合物元素的按键不会触发

来自分类Dev

聚合物定义元素的特性

来自分类Dev

聚合物重复元素含量

来自分类Dev

如何构建聚合物元素?