Question

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

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

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

我正在尝试将此页面定义为聚合物元素并将其用于loda，这不起作用。这是代码......

的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)

Answer 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编辑器，但它非常有用，并通过（有用）警告标记每个问题。

Dart - 未加载Polymer Custom Element

1 个答案: