Polymer.dart 中的自定义元素未显示

Question

由于我似乎一直遇到聚合物中元素消失的问题......

我有以下文件：

pubspec.yaml :

name: photon
dependencies:
  polymer:
    git:
      url: git://github.com/dart-lang/polymer-dart.git
      ref: 1.0.0-rc.5
  polymer_elements:
    git:
      url: git://github.com/dart-lang/polymer_elements.git
  web_components: ^0.12.0
  reflectable: ^0.3.0
transformers:
- web_components:
    entry_points:
      - web/index.html
- reflectable:
    entry_points:
      - web/index.dart

web/index.html ：

<head>
  <link rel="import" href="packages/polymer/polymer.html">
  <link rel="import" href="packages/polymer_elements/paper_toolbar.html">
  <link rel="import" href="photo_view.html">
</head>
<body>
  <paper-toolbar>
    <div class="title">Photon</div>
  </paper-toolbar>
  <photo-view url="abc123"></photo-view>
  <script type="application/dart" src="index.dart"></script>
</body>

web/index.dart ：

export 'package:polymer/init.dart';

web/photo_view.html ：

<dom-module id="photo-view">
  <template>
    <p>Photo <span>{{url}}</span> goes here with filters
    [<span>{{filters}}</span>]</p>
  </template>
</dom-module>

web/photo_view.dart ：

@HtmlImport('photo_view.html')
library photon.photo_view;

import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;

@PolymerRegister('photo-view')
class PhotoView extends PolymerElement {
  PhotoView.created() : super.created();

  @Property(notify: true)
  String url;
}

根据我为 Polymer.dart 1.0 找到的文档，这应该可以工作。 唯一的问题是， photo-view根本没有出现。 在所有。 我看到的只是工具栏。 与上次发生这种情况不同，重新排列index.html中的元素没有任何作用。 我试过了：

从index.dart导入photo_elements.dart 。
重新排列index.html各种导入和节点。
显式添加<script type="application/dart" src="photo_view.dart"></script>到photo_view.html 。

他们都没有做任何事情。 我什至尝试删除build和packages目录并重新运行pub get和pub build 。

如果我打开build/web/index.html ，我可以看到没有添加photo_view.dart中的任何注册代码。 实际上， photo_view.dart没有任何photo_view.dart 。 这可能是问题的一部分吗？

Answer 1

我将index.dart更改为

import 'photo_view.dart';
import 'package:polymer_elements/paper_toolbar.dart';
export 'package:polymer/init.dart';
/// Silence analyzer [PhotoView], [PaperToolbar]
const _silence = 0;

它奏效了。 最后两行只是为了防止来自 Dart 分析器的“未使用的导入提示”。

Answer 2

如果您在 html 中使用<link rel="import">样式导入（而不是 dart 文件中的 dart 导入），那么您需要稍微更改反射变压器配置：

- reflectable:
    entry_points:
      - web/index.bootstrap.initialize.dart

这是因为index.dart文件无法访问出现在 html 导入中的 dart 文件。 然而，引导文件确实包含所有必要的导入。

一般来说，虽然鼓励使用 dart 导入而不是 html 导入。

Polymer.dart 中的自定义元素未显示

问题描述

2 个解决方案

解决方案1
1 2015-11-04 20:30:02

解决方案2
1 2015-11-05 16:35:48

Polymer.dart 中的自定义元素未显示

问题描述

2 个解决方案

解决方案1 1 2015-11-04 20:30:02

解决方案2 1 2015-11-05 16:35:48

解决方案1
1 2015-11-04 20:30:02

解决方案2
1 2015-11-05 16:35:48