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 中使用它？. 到目前为止，我在 out 文件夹代码中收到了许多我什至不应该更改的错误。请参阅下面的确切代码：

来源 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 回答