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