Динамически добавьте веб-компонент в div

Я начал с примера генерации кликов. Я сделал клик-счетчик в библиотеке, которую затем импортировал в свой основной файл. Компонент click-counter можно добавить вручную, разместив соответствующий HTML-код на веб-странице перед запуском программы. Тем не менее, я не смог найти способ динамически добавлять веб-компонент клик-счетчик в div. Мои попытки либо закончились «Aw, snap!». ошибок или просто ничего не происходит.Динамически добавьте веб-компонент в 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); 
}

Я попытался добавил пустой конструктор нажать -counter, но он по-прежнему падает.

источник

2013-04-14 Phlox Midas

У меня была та же проблема. См. Пример (не мой) на 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(); 
}

Там больше информации на мой [email protected] пост: https://groups.google.com/a/dartlang.org/d/topic/web-ui/hACXh69UqG4/discussion

Надежда, что помогает.

источник

2013-04-17 19:34:47 lizard

Hi. Это решило мою проблему. Я собирался опубликовать код в качестве нового ответа, но я хотел, чтобы вы получили баллы, поэтому, возможно, вы можете отредактировать свой код, добавив код. Тогда я отмечу это как ответ. –

отформатированный код ere: http://pastebin.com/2pV6v8DQ –

Динамически добавьте веб-компонент в div

ответ

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