1

ダーツの旅を通して、コンポーネントのロードに関して「ブロッカー」に出くわしました。

コンポーネントを次のように定義している間：

<!DOCTYPE html>
<element name="x-foo" constructor="FooComponent" extends="button">
  <template>
    <button type="button" class="btn {{classes}}"> {{text}} </button>
   </template>

   <script type="application/dart">

   import 'package:web_ui/web_ui.dart';

   String classes = '';
   String text = '';

   class FooComponent extends WebComponent {

   }
   </script>
</element>

次のようにコンポーネントを参照します。

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>example</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- '../web/foo.html' or '../web/out/foo.html.dart' -->
    <link rel="components" href='foo.html'>
  </head>
  <body>
    <h1>example</h1>

    <p>Hello world from Dart!</p>

    <x-foo></x-foo>

    <script type="application/dart">void main() { }</script>
    <script type="text/javascript" src="dart.js"></script>
  </body>
</html>

ビルド スクリプトが html ファイル (出力フォルダー: foo.html.dart) を作成しないため、どのファイルを参照する必要があるかわかりません。

マニュアルも私の問題を解決するのに十分なほど宣言的ではありません: http://www.dartlang.org/articles/dart-web-components/spec.html#loading-components

コンポーネントの定義 (foo.html) または生成された出力 (foo.html.dart) の参照が機能していません。また、検査を通じて両方のファイルのパスを再確認しました。これにより、両方のファイルがクロムでダウンロードされました。

私の最後の質問: この参照 (リンク要素 href) は、実行時に内部インテリジェンスまたは「物理的な」利用可能なファイルを指していますか? 次に、どちら (生成 (html/dart) またはソース) ですか?

誤解を避けるために、レポのリストを追加しました。

foo
  packages
  examples
    assets
    dart.js
    example.html
  web
    out
      foo.html.dart
    foo.html
  build.dart
4

2 に答える 2

2

コンポーネント ファイル ( foo.html) に<html><body>...</body></html>タグがありません:

<!DOCTYPE html>
<html>
<body>
<element name="x-foo" constructor="FooComponent" extends="button">
...
</element>
</html>
</body>

両方のファイル (examples.htmlとfoo.html) は同じベース ディレクトリにある必要があります。

web
  examples.html
  foo.html
  ...

次に、examples.html内部で引数として使用する必要がありますbuild.dart:

build(new Options().arguments, ['web/example.html']);

そして最後に、foo.html(つまりweb/foo.html) がリンクされる必要があります。

<link rel="components" href='foo.html'>
于 2012-12-19T22:10:12.840 に答える
0

メインのHTMLファイルでの使用方法は正しいです。参照foo.htmlするHTMLドキュメントはdwcでコンパイルする必要があるため、参照します。dwcは、メインのHTMLファイルを取得し、それとそれに含まれるすべてのコンポーネントをコンパイルします。コンポーネントは完全にDartにコンパイルされ、それらの.htmlファイルは使用されなくなります。

example.htmlを編集してコンポーネントを含める場合は、をコンパイルする必要があります。をコンパイルする必要はexample.htmlありませんfoo.html。引き続きfoo.html.dartを生成しますが、example.html.dartすべてをロードするためのブートストラップスクリプトも生成します。

于 2012-12-19T22:00:39.950 に答える