Question

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

我目前的目标是为RadialSelector类创建一个可观察的'children'字段，这样我就可以通过子节点进行模板循环，并过滤那些只属于某种元素类型的模板。

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

我的RadialSelector类是否可以扩展PolymerElement类，以使其超类“children”字段可观察？目前，当我写@observable孩子时，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，重定向到超类＆＃39;儿童

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

并使用变异观察者在孩子改变时更新此字段。

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

这样每次您的孩子更改myChildren时，都会获得指定的全新列表，并且由于@observable注释，视图会收到有关此更改的通知。
您不需要使列表可观察，因为没有单独的添加/删除/替换操作可供观察。

使超类字段可观察

1 个答案: