data-binding - 使父类(super class)字段可见

Question

我正在尝试使用Dart中的Polymer创建一个自定义的“径向选择器”元素。

我当前的目标是为RadialSelector类创建一个可观察的“子项”字段，以便我可以对子项进行模板循环，并过滤仅具有特定元素类型的子项。

目前尚不清楚如何在不创建另一个与命名空间不冲突的变量的情况下使“子项”字段可观察。例如，我可以只创建一个“childs”字段，使其可观察，然后将其设置为等于this.children。但这似乎很尴尬，很简单。

我的RadialSelector类是否有一种方法可以扩展PolymerElement类，以使其父类(super class)的“children”字段可观察？目前，当我只编写@observable children时，Dart(可以理解)认为我正在创建一个新的“children”变量。

谢谢，让我知道是否有什么我可以说清楚的! :)

这是Dart代码:

      import 'package:polymer/polymer.dart';
      import 'dart:html';

      @CustomTag('radial-selector')
      class RadialSelector extends PolymerElement {
        @published String img;
        @observable children;
        RadialSelector.created() : super.created() { 
          print("CONSTRUCTING RADIAL SELECTOR");
          print(children);
           }

        filterByType(Type t, List<Element> elems) {
          print("FILTER BY TYPE CALLED");
          List<Element> newElems = new List<Element>();

          for (var e in elems) {
            if (e.runtimeType == t)
              newElems.add(e);
          }
          return newElems;
          }
       }

这是相应的html:

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

<polymer-element name="radial-selector">   
  <template>
    <style>
    :host {
    display: block;
    margin: 100px
    }

    </style>
         <script>console.log("HEY");</script>

    <div id="stem">

     <img src = "{{img}}" alt ="Radial stem"/>

     <template repeat = "{{child in children | filterByType(ImageElement)}}">   
         <polymer-ui-icon-button src = {{child.src}}></polymer-ui-icon-button> 
     </template>
    </div>
  </template>
  <script type="application/dart" src="radialselector.dart"></script>
</polymer-element>

Answer 1

您无法为children执行此操作。

您可以创建一个@observable getter / setter来重定向到父类(super class)的 child

@observable
NodeList get children => super.children;
set children(NodeList val) => super.children = val; // won't work

这有两个缺陷。

children列表是final(尚未尝试，但我确定您无法分配新列表。

拥有@observable children对您完全没有帮助。
仅当分配了另一个列表时，您才会收到通知(这是不可能的，因为该字段是最终的)
您需要一个可观察的列表，以获取有关列表元素更改(添加/删除/替换)的通知。
为此，您将需要用children替换toObservable(children)，这是不可能的，因为您不能替换children集合。

您可以做的就是使用 MutationObserver。请参阅 Angular Dart - execute a function right after ng-repeat has finished以获取有关子节点更改的通知。

您可以添加一个新字段

@observable List myChildren;

并在 child 发生变化时使用变异观察者更新此字段。

void mutationCallback(...) {
  ...
  myChildren = children.toList();
}

这样，每次 child 更改 myChildren时 都会获得分配给的整个新列表，并且由于 @observable批注， View 会收到有关此更改的通知。
您无需使列表可观察，因为没有要观察的单个添加/删除/替换操作。