Добавление динамических разделов веб-компонентов

Я пытаюсь динамически добавить несколько div с помощью Dart. Разделы содержат настраиваемый веб-компонент, и я пытаюсь передать переменную. Я хочу иметь возможность указать 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
person jmoneystl    schedule 17.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы не можете просто так добавлять веб-компоненты. WebUI не знает, что что-то было добавлено, поэтому вы просто получаете обычный div.

Вот текущий (слегка запутанный) способ динамического добавления веб-компонентов:

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);

}
person Pixel Elephant    schedule 17.06.2013
comment
Спасибо за Ваш ответ. Как ни странно, после добавления конструктора в ProductComponent я получаю Breaking on exception: No constructor 'ProductComponent' declared in class 'ProductComponent'. - person jmoneystl; 17.06.2013
comment
Обязательно запустите компилятор WebUI перед тестированием в Dartium. Если вы используете DartEditor, вы можете щелкнуть правой кнопкой мыши build.dart и выбрать «Выполнить». - person Pixel Elephant; 17.06.2013