添加动态 WebComponent div答案

【问题标题】：Adding dynamic WebComponent divs添加动态 WebComponent div
【发布时间】：2013-06-13 18:05:17
【问题描述】：

我正在尝试使用 Dart 动态添加多个 div。 div 包含一个自定义 Web 组件，我正在尝试传入一个变量。我希望能够指定 n 个变量，将它们传递给 n 个组件，然后将它们插入到 HTML 文档中。然而，正在发生的事情是我得到了没有变量的插入 div。我想知道这是否是 Dart 试图将某些东西传递给已经加载的 DOM 并因此什么都不做的情况......？这是一些代码：

product_elem.dart：

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

class ProductComponent extends WebComponent {
  var productId;
}

product_elem.html：

<!DOCTYPE html>
  <html>
    <body>
      <element name="product-elem" constructor="ProductComponent" extends="div">
        <template>
          <div style="width:335px;margin:10px;">
            <h3>
              {{productId}}
            </h3>
         </div>
      </template>
      <script type="application/dart" src="product_elem.dart"></script>
    </element>
  </body>
</html>

testcase_component.dart：

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

var productId;

void main() {
  List myList = new List();
  myList.addAll(["Foo", "Bar", "Baz"]);
  for (var i = 0; i < myList.length; i++) {
    productId = myList[i];
    query('#products').innerHtml += 
      "<div is='product-elem' id='product_elem' product-id='{{productId}}'></div>";
  }
}

testcase_component.html：

<!DOCTYPE html>
<html>
  <head>
    <link rel="import" href="product_elem.html">
  </head>
  <body>
    <div id="products">
      <!-- Insert dynamic divs here -->
    </div>
    <script type="application/dart" src="testcase_component.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

【问题讨论】：

标签： dart dart-webui

【解决方案1】：

你不能像那样添加 WebComponents。 WebUI 不知道添加了任何内容，因此您最终会得到一个普通的 div。

这是当前（有点混乱）动态添加 WebComponents 的方式：

void main() {
  List myList = new List();
  myList.addAll(["Foo", "Bar", "Baz"]);
  for (var i = 0; i < myList.length; i++) {
    productId = myList[i];
    var product = new ProductComponent(productId);
    product.host = new DivElement();
    var lifecycleCaller = new ComponentItem(product)..create();
    query('#products').append(product.host);
    lifecycleCaller.insert();
  }
}

这样调用正确的 WebUI 生命周期。

还要确保为 ProductElem 添加一个构造函数，以便可以在外部设置 productId：

class ProductComponent extends WebComponent {
  var productId;

  ProductComponent(this.productId);

}

【讨论】：

感谢您的回答。奇怪的是，将构造函数添加到ProductComponent 后，我得到Breaking on exception: No constructor 'ProductComponent' declared in class 'ProductComponent'.
确保在 Dartium 中测试之前运行 WebUI 编译器。如果您使用的是 DartEditor，您可以右键单击 build.dart 并选择 Run。