Question

因为我似乎一直遇到disappearing elements in Polymer ...

的问题

我有以下文件：

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中的元素并不会做任何事情。我试过了：

从photo_elements.dart。

index.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的 nothing 存在。这可能是问题的一部分吗？

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 个答案: