html - 如何使用具有不同文件结构的 Dart Polymer?

标签 html dart polymer dart-polymer

我试图了解如何使用具有不同于默认 Pub/Dart 结构的文件结构的 polymer (因此教程在这里对我没有帮助)。我已阅读以下页面:

这是我的结构:

src/
 controllers/, models/, views/ #Go related files
 main.go #Go web server
 static/ #CSS, Images, Dart
   ...
   styles/
   scripts/
     packages/ #links to actual packages
     web/
       packages/ #link to ../packages
       ui-elements.html
       main.dart
     pubspec.yaml
   ...

src/views/index.html - 站点的索引页

...
<head>
  <link rel="import" href="scripts/web/ui-elements.html"/>
</head>
<body>
  <ui-watch></ui-watch>
  <!-- Does it should come first or after polymer/init.dart? -->
  <script type="application/dart" src="scripts/web/main.dart"></script>
  <!-- path doesn't resolve correctly so I commented it and place initialization into the main.dart file itself -->
  <!--<script type="application/dart">export 'package:polymer/init.dart';</script>-->
  <script src="scripts/packages/browser/dart.js"></script>
</body>

src/static/scripts/web/main.dart

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

@CustomTag('ui-watch')
class UIWatch extends PolymerElement {
  @observable String counter = '00:00';

  UIWatch.created() : super.created();

  ButtonElement startWatch;

  @override
  void detached() {
    super.detached();

  }
}
main() {
  initPolymer();
}

src/static/scripts/web/ui-elements.html

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ui-watch">
  <template>
    <div>{{counter}}</div>
    <div>
      <button id="startWatch">Start</button>
    </div>
  </template>

  <!--<script type="application/dart" src="main.dart"></script>-->
</polymer-element>

运行后,我得到以下信息:

GET http://localhost:8080/packages/polymer/polymer.html 404 (Not Found)
Error loading html import from path `polymer.html`
Found bad packages uri in html import. All packages uris should point to the
packages symlink in the same folder as the entry point.

Entry point: http://localhost:8080/
Owner document: http://localhost:8080/scripts/web/ui-elements.html
Current import: <link rel="import" href="packages/polymer/polymer.html">
#I've already try this path, but I got the same error
Corrected import: <link rel="import" href="../../packages/polymer/polymer.html">

For more information, please see:
https://www.dartlang.org/polymer/app-directories.html#into-a-non-dart-non-entry-point

warning: http://localhost:8080/packages/polymer/polymer.html not found.

这是怎么回事?我对如何组织这些文件有点困惑。无论我尝试什么,路径都无法正确解析。我认为,这里的问题之一是我不了解 polymer/polymer.html 和 polymer/init.dart 实际上做了什么以及它们应该包含在什么顺序中。

最佳答案

那是行不通的。如果您偏离 pub 包结构 pub buildpub serve 将无法创建可运行的 Dart 或 JavaScript 应用程序。

如果您希望您的 go web 服务器为 Dart 客户端提供服务,则只需要将构建输出放在目录中,go 提供静态内容,而不是 Dart 源文件。无论如何都不应该部署它们。

对于开发,您应该使用代理或修改您的 go 服务器以充当代理,将所有与 Dart 相关的请求转发到 pub serve

关于html - 如何使用具有不同文件结构的 Dart Polymer?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29589373/

相关文章:

javascript - Vaadin 14 中的 Google map

html - CSS 问题 : fixed footer with width of 100% is too wide

html - 侧导航内的右对齐图标按钮

flutter - 在列小部件内的特定位置对齐行项目

flutter - 在 Flutter 中计算和显示 map 项总数时出错

javascript - 在可重用 Polymer 组件内的元素上使用 ID 是否安全?

javascript - 自定义元素之间的 polymer 双向绑定(bind)[包括示例]

javascript - 在javascript中获得除法后的高余数

javascript - 隐藏弹出点击任何地方

android - Flutter Location Package帮助:我想将用户证明的坐标提取为单独的var/string或double