1

カスタム Web コンポーネントを使用するライブラリを構築する必要が生じるまで、私のプログラムは問題なく動作していました。Dart が何について不平を言っているのか理解できません。「my_library を解決できません」という警告が表示され、「そのようなタイプの WebComponent はありません」というエラーが発生します。私はこれに基づいて試みました。これが私のコードです：

myapp.dart:

library my_library;

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

part 'fancyoption.dart';

void main() {
  // Enable this to use Shadow DOM in the browser.
  //useShadowDom = true;
}

myapp.html:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="myapp.css">
    <link rel="components" href="fancyoption.html">
  </head>
  <body>
    <h3>Type a color name into a fancy option textbox, push the button and 
    see what happens!</h3>

    <div is="x-fancy-option" id="fancy-option1"></div>
    <div is="x-fancy-option" id="fancy-option2"></div>
    <div is="x-fancy-option" id="fancy-option3"></div>

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

fancyoption.dart (同じ web/out ディレクトリ内):

part of my_library;

class FancyOptionComponent extends WebComponent {
  ButtonElement _button;
  TextInputElement _textInput;

  FancyOptionComponent() {
  }

  void inserted() {
    _button = this._root.query('.fancy-option-button');
    _textInput = this._root.query('.fancy-option-text');

    // make the background color of this web component the specified color
    final changeColorFunc = (e) => this.style.backgroundColor = _textInput.value;
    _button.onClick.listen(changeColorFunc);
  }
}

ファンシーオプション.html:

<!DOCTYPE html>

<html>
  <body>
    <element name="x-fancy-option" constructor="FancyOptionComponent" extends="div">
      <template>
        <div>
          <button class='fancy-option-button'>Click me!</button>
          <input class='fancy-option-text' type='text'>
        </div>
      </template>
      <script type="application/dart" src="fancyoption.dart"></script>
    </element>
  </body>
</html>
4

1 に答える 1

0

正解はコメントに投稿されました - 将来の読者のために、Chris Buckett の回答を Answer として再投稿します。

「Web コンポーネントはスタンドアロンの再利用可能なコンポーネントであるため、fancyoption.dart をメイン アプリの一部にするべきではありません。」

于 2013-09-11T09:47:12.883 に答える