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

Я пытаюсь динамически добавлять несколько div с помощью Dart. В divs есть пользовательский веб-компонент, и я пытаюсь передать переменную. Я хочу, чтобы иметь возможность указать n количество переменных, передать их n количеству компонентов и вставить их в HTML-документ. Однако, что происходит, я получаю вставленные div без переменных. Интересно, если это случай, когда Дарт пытается передать что-то в уже загруженный DOM и поэтому ничего не делает ...? Вот код:Добавление динамических разделов WebComponent

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>

источник

2013-06-17 jmoneystl

Вы не можете просто добавить такие WebComponents. 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); 

}

источник

2013-06-17 18:02:28

Спасибо за ваш ответ. Как ни странно, после добавления конструктора в 'ProductComponent', я получаю' Breaking on exception: No constructor 'ProductComponent', объявленный в классе ProductComponent. ' – jmoneystl

Обязательно запустите компилятор WebUI перед тестированием в Dartium. Если вы используете DartEditor, вы можете щелкнуть правой кнопкой мыши по файлу build.dart и выбрать «Выполнить». –

Работа. Благодаря! – jmoneystl

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

ответ

Смежные вопросы