1

我一直在关注 Dart 的本教程：

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

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

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

索引.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>

登录.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>

登录.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)
4

1 回答 1

3

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

在你的signin.html这一行： 

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

在signin.dart： 

@CustomTag('signin-element')

最后在你的index.html： 

<signin-element></signin-element>

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

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

于 2013-11-10T10:50:09.307 回答