Вложение в Dart PolymerElement в другом PolymerElement

Question

Я пытаюсь вложить в Dart PolymerElements в еще один PolymerElement вот так.

@CustomTag('test-box') 
class Box extends PolymerElement{ 
    @observable List<Child> childs = new List<Child>(); 

    Box.created() : super.created() { } 
} 

@CustomTag('test-child') 
class Child extends PolymerElement{ 
    Child.created() : super.created() { } 
} 

, а затем в testbox.html

<link rel="import" href="testchild.html"> 
<polymer-element name="test-box"> 
    <template> 
    <div> 
     <ol name="child-list"> 
     <template repeat="{{child in childs}}"> 
      {{child}} 
     </template> 
     </ol> 
    </div> 
    </template> 
    <script type="application/dart" src="testbox.dart"></script> 
</polymer-element> 

Это возможно с Дартом/Polymer? Все мои попытки потерпели неудачу. Я хочу обрабатывать узлы html как классы.

Заранее спасибо

Answer 1

Вы можете использовать объектную модель для передачи данных в дочерний элемент с помощью опубликованной недвижимости.

Проверить этот пример: https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/observable_objects_inside_list_changes

Answer 2

Вы можете добавить дочерние узлы к коробке, например:

@CustomTag('test-box') 
class Box extends PolymerElement{ 
@observable List<Child> childs = new List<Child>(); 

    Box.created() : super.created() { 

    } 

    void _addChildren(List<Child> children) { 
     children.forEach((Child c) { 
      this.children.add(c); 
     } 
    } 

    @override void attached() { super.attached(); _addChildren(childs); } 
} 

Затем вы можете отслеживать изменения на Чайлдс с помощью observable API, чтобы отразить изменения в массиве ,

Опасайтесь, что Child объект должен быть создан с помощью new Element.tag("test-child").

Но ИМХО лучшее решение - это то, что предлагает @Leksat, используя более чистый подход MVC.

Answer 3

У меня была почти такая же проблема и она была решена с использованием какого-то прокси-элемента. ProxyElement Dart код:

library ProxyElement; 

import 'package:polymer/polymer.dart'; 

@CustomTag('proxy-element') 
class ProxyElement extends PolymerElement { 

    @published PolymerElement target; 

    ProxyElement.created() : super.created(); 

    attached() { 
    shadowRoot.querySelector('#proxy').append(target); 
    } 

} 

И его HTML код:

<link rel="import" href="../packages/polymer/polymer.html"> 

<polymer-element name="proxy-element"> 
    <template> 
    <style> 
     :host { 
     display: inline; 
     } 
    </style> 

    <template if="{{target == null}}"> 
     No target element defined. 
    </template> 
    <template if="{{target != null}}"> 
     <div id="proxy"></div>  
    </template> 
    </template> 
    <script type="application/dart" src="proxy_element.dart"></script> 
</polymer-element> 

Использование:

... 
<template repeat="{{child in children}}"> 
    <proxy-element target="{{child}}"></proxy-element> 
</template> 
...