Question

我正在尝试在另一个 PolymerElement中的Dart PolymerElements中嵌套，如下所示。

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

然后，您可以使用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>
...

在另一个PolymerElement中嵌入Dart PolymerElement

3 个答案: