dart - 在 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>

Dart/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); }
}

然后，您可以使用 API 监控子级observable的更改以反映数组上的更改。

请注意，该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>
...