在聚合物飞镖中,从父母到儿童组成部分的沟通方式是什么?

时间:2013-12-02 11:57:30

标签: dart dart-polymer

为了从孩子到父母进行交流,事件似乎是最优雅的方式。 从父母到孩子的沟通方式有哪些?

更具体地说,我想要一个在孩子变得可见时调用的方法。 这些是我提出的想法:

  • xtag - 优雅而有效
  • 观察'隐藏' - 没有设法让这个工作,隐藏在Element中没有被标记为可观察
  • 在child中发布一个触发器变量,在parent中绑定并更改它 - 丑陋

还有其他选择吗?

2 个答案:

答案 0 :(得分:0)

我还没有尝试过,但也许MutationObserver可以做你想要的。

Seth Ladd的聚合物实例包含两个例子: 第一个侦听onMutation事件 https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/onmutation-mutation-observer/my_element.dart

library my_element;

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

@CustomTag('my-element')
class MyElement extends PolymerElement {
  MyElement.created() : super.created() {

    // NOTE this only fires once,
    // see https://groups.google.com/forum/#!topic/polymer-dev/llfRAC_cMIo
    // This is useful for waiting for a node to change in response
    // to some data change. Since we don't know when the node will
    // change, we can use onMutation.
    onMutation($['list']).then((List<MutationRecord> records) {
      $['out'].text = 'Change detected at ${new DateTime.now()}';
    });

    new Timer(const Duration(seconds:1), () {
      $['list'].children.add(new LIElement()..text='hello from timer');
    });
  }
}

第二个示例使用MutationObserver类 https://github.com/sethladd/dart-polymer-dart-examples/blob/master/web/mutation_observers/my_element.dart

=== edit ===

您是否尝试过链接的示例? observe方法允许指定应该观察的内容:

  /**
   * Observes the target for the specified changes.
   *
   * Some requirements for the optional parameters:
   *
   * * Either childList, attributes or characterData must be true.
   * * If attributeOldValue is true then attributes must also be true.
   * * If attributeFilter is specified then attributes must be true.
   * * If characterDataOldValue is true then characterData must be true.
   */
  void observe(Node target,
               {bool childList,
                bool attributes,
                bool characterData,
                bool subtree,
                bool attributeOldValue,
                bool characterDataOldValue,
                List<String> attributeFilter}) {

答案 1 :(得分:0)

从母体聚合物到儿童聚合物的沟通,这种解决方案对我有用。

如果我们有这样的儿童聚合物元素:

library my_element;

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

@CustomTag('my-element')
class MyElement extends PolymerElement {
  MyElement.created() : super.created() {
  }

  myCustomMethod(param){
    print("pass-in param = $param");
  }

}

要从父级访问您的子元素:

  1. 在父元素中查询您的子聚合物元素(是的,首先访问HTML元素)
  2. 将其投射到绑定类(在我们的例子中为ex:MyElement.dart)
  3.   (theParentClass.querySelector("my-element") as MyElement).myCustomMethod({"done":true});