2

したがって、私のPolymer.DartプロジェクトはChromiumで正常に実行されています(Dartコードで実行されています)が、アップグレードを発行してビルドを発行すると、サンプラーの足場は機能し続けますが、紙のボタン、紙のダイアログ、紙の進行状況...要素はそうではありません登場！

私のHTMLファイルは次のようになります

    <link href='http://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'>


    <link rel="import" href="packages/paper_elements/paper_button.html">
    <link rel="import" href="packages/paper_elements/paper_dialog_transition.html">
    <link rel="import" href="packages/paper_elements/paper_dialog.html">

    <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->

    ...

    <paper-button id="infoUPC" class="cd-read-more" raised>Read more</paper-button>
     ...
    <script src="education.dart" type="application/dart"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/main.js"></script> <!-- Resource jQuery -->
    <script src="js/modernizr.js"></script> <!-- Modernizr -->

教育.ダーツ

import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:paper_elements/paper_dialog.dart';

main() {
  initPolymer().run(() {
    Polymer.onReady.then((_) {

      querySelector('#infoFHV').onClick.listen(
              (_) => toggleDialog('fhv'));
      querySelector('#infoUPC').onClick.listen(
              (_) => toggleDialog('upc'));

      querySelector('#infoTU').onClick.listen(
              (_) => toggleDialog('tu'));
    });
  });
}

toggleDialog(language) =>
(querySelector('paper-dialog[edu=$language]') as PaperDialog)
.toggle();

pubspec.yaml

name: polydart_resume
version: 0.0.1
author: Shady
description: Test app
dependencies:
  core_elements: '>=0.3.2 <0.5.0'
  custom_element_apigen: ">= 0.1.1 <0.2.0"
  polymer: ">=0.14.0 <0.16.0"
  web_components: ">=0.9.0 <0.10.0"
  paper_elements: ">=0.5.0 <0.6.0"
transformers:
- polymer:
    entry_points:
    - web/index.html

pub build では、これらのファイルに関する警告やエラーは表示されませんが、何かが足りないのは確かですか?

4

2 に答える 2

1

と の 2 つのエントリ ページがindex.htmlありlanguages.htmlます。カスタムのみlanguages.htmlを呼び出しますが、トランスフォーマー構成main()のみです。index.htmlpubspec.yaml

index.htmlこのスクリプトタグmain()により、Polymer によって提供されるデフォルトのメソッドが呼び出されますが、カスタムのメソッドは呼び出されません。main()

<script type="application/dart">export 'package:polymer/init.dart';</script>

languages.html正しいスクリプト タグがある

<script type="application/dart" src="languages.dart"></script>

languages.htmlただし、Polymer Transformerentry_points構成にリストされていないため、これは期待どおりに機能しません

transformers:
- polymer:
    entry_points:
#    - web/index.html
    - web/languages.html

コメントから:

Q: drawer.html ( <core-item label="Languages" url="chapters/languages.html"></core-item>) 内のリンクから languages.html をロードしますか? – Günter Zöchbauer 25 分前

A: はい、まさに私がやっていることです。

これは、通常、Dart でアプリケーションを開発する方法ではありません。できますが、Dart は SPA 用です ( http://en.wikipedia.org/wiki/Single-page_application )。

Dart アプリケーションから別のページをロードすると、まったく別のアプリケーションを起動するようなものになります。この方法でロードされた各ページ (アプリ) が機能するには、Polymer アプリケーションのすべての部分が必要です。

通常、Dart には 1 つのエントリ ページ ( entry_point) しかなく、ユーザーに表示されるもの (新しいビュー) を変更する場合は、別のページを読み込むのではなく、現在のページのコンテンツを置き換えます (たとえば、Polymer 要素がある場所です)。たとえば、1 つの要素 (ビュー) を削除して別の要素を追加するだけです)。

また、Dart には定型コードのサイズがかなり大きく、別のページをロードするたびにロードする必要があり、かなり非効率的です。

于 2014-10-30T12:06:16.413 に答える
1

私の問題は実際にはコードに関連したものではなく、より基本的なものだったので、www.polymer-project.org でサンプル プロジェクトを見つけました。ここで、推奨されるルーティング方法を確認できます。ポリマーの紹介ドキュメントは、このトピックを十分にカバーしていません...

于 2014-10-31T10:08:58.337 に答える