Dart - 未加载聚合物自定义元素答案

【问题标题】：Dart - Polymer Custom Element not loadedDart - 未加载聚合物自定义元素
【发布时间】：2013-11-09 21:24:44
【问题描述】：

我一直在关注这个 Dart 教程：

https://www.dartlang.org/docs/tutorials/polymer-intro/

作为快速测试运行，我正在尝试设置一个非常基本的东西 - 一个带有标签和两个输入的页面。

我正在尝试将此页面定义为 Polymer Element 并使用它，但这不起作用。这是代码...

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>GXMMaps</title>
    <link rel="import" href="signin.html">
    <script type="application/dart"> 
        import 'package:polymer/init.dart';
    </script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <signin></signin>
  </body>
</html>

signin.html

<!-- Basic sign in form...-->
<!DOCTYPE html>
 <polymer-element name="signin">
 <template>
    <style>
      @host {
        :scope {
          background-color: LemonChiffon;
          text-align: center;
          display: inline-block;
          border: solid 1px;
          padding: 10px 10px 10px 10px;
        }
      }
    </style>
    <div>GXM Maps</div> 
    <div>
      <div>
        <input  id="username">Username</>
      </div>
      <div>
        <input  id="password">Password</>"
      </div>
    </div>
  </template>
  <script 
      type="application/dart" 
      src="signin.dart">
  </script>
 </polymer-element>

signin.dart

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

@CustomTag('signin')
class signin extends PolymerElement {
  signin.created() : super.created();
  // we'll do username and password submission here... 
}

如果我在 index.html 中放置一个看起来很好的标题，并且如果我检查页面，我可以看到一个元素，但它是空的。

编辑::

我按照上面的评论，改变了

<script type="application/dart"> 
    import 'package:polymer/init.dart';

到

<script type="application/dart"> 
    export'package:polymer/init.dart';

现在运行时出现以下错误：

Uncaught Error: InvalidCharacterError: Internal Dartium Exception
Stack Trace: 
#0      _Utils._register (file:///E:/b/build/slave/dartium-win-full-stable/build/src/dart/tools/dom/src/native_DOMImplementation.dart:461)
#1      _Utils.register (file:///E:/b/build/slave/dartium-win-full-stable/build/src/dart/tools/dom/src/native_DOMImplementation.dart:457)
#2      HtmlDocument.register (file:///E:/b/build/slave/dartium-win-full-stable/build/src/build/Release/obj/global_intermediate/blink/bindings/dart/dart/html/HtmlDocument.dart:222)
#3      PolymerDeclaration.registerType (package:polymer/src/declaration.dart:239:22)
#4      PolymerDeclaration.register (package:polymer/src/declaration.dart:164:17)
#5      PolymerDeclaration._register (package:polymer/src/declaration.dart:114:13)
#6      PolymerDeclaration.registerWhenReady (package:polymer/src/declaration.dart:109:14)
#7      _notifyType (package:polymer/src/declaration.dart:477:49)
#8      Polymer.register (package:polymer/src/instance.dart:62:16)
#9      _loadLibrary (package:polymer/src/loader.dart:181:25)
#10     _loadLibraries (package:polymer/src/loader.dart:89:19)
#11     _initPolymerOptimized (package:polymer/src/loader.dart:54:17)
#12     _rootRun (dart:async/zone.dart:688)
#13     _ZoneDelegate.run (dart:async/zone.dart:417)
#14     _CustomizedZone.run (dart:async/zone.dart:627)
#15     initPolymer (package:polymer/src/loader.dart:37:33)
#16     main (package:polymer/init.dart:23:22)


Exception: InvalidCharacterError: Internal Dartium Exception
  undefined (undefined:0:0)

【问题讨论】：

前几天有变化，好像教程还没更新。只需将 init.dart 的导入替换为 html 中的导出即可：groups.google.com/a/dartlang.org/forum/#!topic/web-ui/…
这是否与教程说使用查询但 ide 说它已折旧的原因相同？

标签： dart dart-polymer

【解决方案1】：

好的。应该仔细看看你的代码。您元素的名称不正确。它必须包含至少一个破折号。将其更改为 signin-element 即可。

在您的signin.html 这一行：

<polymer-element name="signin-element">

在signin.dart:

@CustomTag('signin-element')

最后在你的index.html：

<signin-element></signin-element>

您还应该检查signin.html 中的html。您输入后的那些</> 和</>" 不属于那里。

我不知道您是否在使用 Dart 编辑器，但它非常有用，并且用（有用的）警告标记了这些问题。

【讨论】：

谢谢，其实我昨天就知道了。教程中也没有提到，至少我没有看到。