Question

我无法将数据从子组件转发到父组件并返回子组件。

我制作了一个简单的嵌套组件测试平台。这是孩子：

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

<polymer-element name="child-comp" attributes="x y">
  <template>
    <input type='text' value='{{x}}'/>
    <p>-x={{x}}-</p>
    <p>list:
      <template repeat='{{y}}'>-{{ }}-</template>
    </p>
  </template>

  <script type='application/dart'>
    import 'package:polymer/polymer.dart';

    @CustomTag('child-comp')
    class ChildComp extends PolymerElement {
      @observable var x;
      @observable var y;

      ChildComp.created() : super.created();
      }
  </script>
</polymer-element>

它需要一个文本输入（x）并将其回显（输入后的p）。它还将x发送回父控件，然后将其添加到列表（y）中，然后在子列表中迭代。

这是父组件：

<link rel="import" href="../packages/polymer/polymer.html">
<link rel="import" href="../components/child_comp.html">

<polymer-element name="top-comp">
  <template>
    <child-comp x='{{s}}' y='{{t}}'></child-comp>
  </template>

  <script type='application/dart'>
    import 'package:polymer/polymer.dart';

    @CustomTag('top-comp')
    class TopComp extends PolymerElement {
      @observable String        s = '1234';
      @observable List<String>  t = ['A', 'B', 'C'];

      TopComp.created() : super.created();

      sChanged(oldVal, newVal) {
        t.add(newVal);
        }
      }

  </script>
</polymer-element>

从子项到父项工作，更改已正确添加到列表中。但List似乎没有找到孩子 - DOM永远不会更新。

我已尝试过装饰器的所有可能组合，但也许答案是在bind = syntax的变体中。

附注：是否有关于装饰者的权威更新文档？搜索出现了许多不同古代的参考文献。

Answer 1

如果我正确理解您的问题，您需要确保不仅是List可观察的，而且还有其元素。你可以这样做：

@observable List<String>  t = toObservable(['A', 'B', 'C']);

这样，t的元素（而不仅仅是t本身）的更改被“公布”，DOM可以相应地更新。

嵌套聚合物自定义组件数据绑定

1 个答案: