3

クリック カウンターの生成の例から始めました。クリック カウンターをライブラリに作成し、それをメイン ファイルにインポートしました。プログラムを実行する前に、適切な HTML を Web ページに配置することにより、クリック カウンター コンポーネントを手動で追加できます。ただし、クリック カウンター Web コンポーネントを div に動的に追加する方法を見つけることができませんでした。私の試みは、「ああ、スナップ！」で終わった。エラーまたは単に何も起こらない。

クリックカウンター (xclickcounter.dart):

library clickcounter;
import 'package:web_ui/web_ui.dart';

class CounterComponent extends WebComponent {
  int count = 0;

  void increment() {
    count++;
  }
}

メインの HTML:

<!DOCTYPE html>

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

    <!-- import the click-counter -->
    <link rel="components" href="xclickcounter.html">
  </head>
  <body>
    <h1>Test1</h1>

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

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

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

メインファイル:

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

// initial value for click-counter
int startingCount = 5;

void main() {
  // no error for adding an empty button
  var button = new ButtonElement();
  query('#sample_container_id').append(button);

  // doesn't work (gives "Aw, snap!" in Dartium)
  query('#sample_container_id').append(new CounterComponent());

  // Nothing happens with this code. Nothing appears.
  // But I promise this same thing was giving Aw, Snap 
  // for a very similar program
  final newComponentHtml = '<div is="x-click-counter"></div>';
  query('#sample_container_id').appendHtml(newComponentHtml);
}

クリックカウンターに空のコンストラクターを追加しようとしましたが、それでもクラッシュします。

4

1 に答える 1

2

同じ問題がありました。https://github.com/dart-lang/web-ui/blob/master/test/data/input/component_created_in_code_test.htmlの例 (私のものではありません) を参照してください。

TL;DR:

void main() {
  var element = query('#sample_container_id');
  appendComponentToElement(element, new CounterComponent() );
}

void appendComponentToElement(Element element, WebComponent component) {
  component.host = new DivElement();
  var lifecycleCaller = new ComponentItem(component)..create();
  element.append(component.host);
  lifecycleCaller.insert();
}

私の web-ui@dartlang.org の投稿に詳細があります: https://groups.google.com/a/dartlang.org/d/topic/web-ui/hACXh69UqG4/discussion

それが役立つことを願っています。

于 2013-04-17T19:34:47.033 に答える