0

私は Dart で非常に単純なことを機能させようとしています。テンプレートから web-ui アプリケーションを作成しましたが、xclick-counter Web コンポーネントをルート フォルダーから移動したいと考えています。Dart エディターで私のプロジェクトがどのように見えるかを次に示します。

NewComposite (folder)
   pubspec.lock (file)
   pubspec.yaml (file)
   web (folder)
      lib(folder)
         comp1.dart (file)
         Comp1.html (file)
         mylib.dart (file)
      newcomposite.css (file)
      newcomposite.dart (file)
      newcomposite.html (file)
      xclickcounter.dart (file)
      xclickcounter.html (file)

Lib フォルダーには、Comp1 に名前が変更された ClickCounter コンポーネントのコピーであるライブラリが含まれています。問題は、Comp1 を newcomposite.html 内で使用するためにどのように参照すればよいかということです。. これまでのところ、変更することさえ想定されていないアウトフォルダーコードで多数のエラーが発生しています。以下の正確なコードを参照してください。

ソース mylib.dart:

library mylib;

import 'dart:html';
import 'package:web_ui/web_ui.dart';

part 'comp1.dart';

comp1.dart:

part of mylib;

class Comp1 extends WebComponent {
  @observable
  int count = 0;

  void increment() {
    count++;
  }
}

Comp1.html

<html>
  <body>
    <element name="x-comp1" constructor="Comp1" extends="div">
      <template>
        <div>
          <button on-click="increment()">Click me</button><br />
          <span>(click count: {{count}})</span>
        </div>
      </template>
      <script type="application/dart" src="comp1.dart"></script>
    </element>
  </body>
</html>

newcomposite.html (参照があるべき場所)

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="newcomposite.css">

    <!-- import the comp1-->
    <link rel="import" href="lib/comp1.html">
  </head>
  <body>
    <h1>NewComposite</h1>

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

    <div id="sample_container_id">
      <div is="x-comp1" id="click_counter" count="{{startingCount}}"></div>
    </div>

    <script type="application/dart" src="newcomposite.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>
4

1 に答える 1

0

lib ディレクトリをプロジェクトのルートに移動すると、よりうまく機能するはずです。

NewComposite (folder)
   pubspec.lock (file)
   pubspec.yaml (file)
   lib(folder)
      comp1.dart (file)
      comp1.html (file)
      mylib.dart (file)
   web (folder)
      newcomposite.css (file)
      newcomposite.dart (file)
      newcomposite.html (file)
      xclickcounter.dart (file)
      xclickcounter.html (file)

pubspec.yaml でプロジェクトに「newcomposite」という名前を付けたと仮定すると、独自のプロジェクト ライブラリを参照して、コンポーネントを newcomposite.html にインポートできます。

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="newcomposite.css">

    <!-- import the comp1-->
    <link rel="import" href="package:newcomposite/comp1.html">
  </head>
  <body>
    <h1>NewComposite</h1>

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

    <div id="sample_container_id">
      <div is="x-comp1" id="click_counter" count="{{startingCount}}"></div>
    </div>

    <script type="application/dart" src="newcomposite.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>
于 2013-08-05T13:35:50.907 に答える