polymer 1.0 父子页面事件处理

Question

我有一个名为 parent-page 的父聚合物元素和一个名为 child-page 的子元素。

父页面调用子页面并传递一个数组。例如，在父页面中：

<child-page items={{itemsArray}}></child-page>

现在，在某些activity子页面的基础上用一个新数组触发一个事件。

例如，在子页面中：

this.fire('eventPerformed', newArray);

该数组正在被父页面侦听并以预期值接收。现在，我想将该新数组传递给子页面，以便根据新数组呈现子页面。

如何实现？

编辑：我的子页面如下所示。

<dom-module id="child-page">

<style>
 
</style>

<template>
 
 <template is="dom-repeat" items="{{itemArray}}" as="fooditem">
       
  <div class="horizontal layout">
   <div>{{fooditem.quantity}}</div>
   <div>{{fooditem.name}}</div>
  </div>
 
 </template>
 <paper-button on-click"changeArray"> ChangeArray</paper-button>
 
</template>
 
<script type="text/javascript">

 Polymer({
  is:'child-page',
  properties:{
   itemArray:Array 
   },
  changeArray:function(){
   this.itemArray=<<Some new Array>>
             this.fire('eventPerformed',newArray);


  }
 });

</script>

</dom-module>

有什么方法可以在同一个子页面中用新数组调用模板重复？或者我是否必须向父页面触发事件并再次调用子页面？如何实现？

Answer 1

child-page 会在其 itemArray 属性更新时自动重新呈现其 template is="dom-repeat" items="[[itemArray]]"。

只需将 notify: true 添加到 child-page 中的 itemArray 属性即可启用与 parent-page 元素的双向绑定。然后 parent-page 也会在 child-page 的 item-array 发生变化时收到通知（参见 Polymer documentation on this topic）。

这是一个完整的小例子：

<dom-module id="child-page">
  <template>
    <template is="dom-repeat" items="[[itemArray]]">
      <div>[[item]]</div>
    </template>
    <div on-click="_changeArray">Change</div>
  </template>
  <script>
    Polymer({
      is: 'child-page',
      properties: {
        itemArray: {type: Array, notify: true}
      },
      _changeArray: function() {
        this.itemArray = [4,5,6,7,8,9];
      }
    })
  </script>
</dom-module>

<dom-module id="parent-page">
  <template>
    <span>Item count: </span><span>[[itemArray.length]]</span>
    <child-page item-array="{{itemArray}}"></child-page>
  </template>
  <script>
    Polymer({
      is: 'parent-page',
      properties: {
        itemArray: {type: Array, value: [1,2,3]}
      }
    })
  </script>
</dom-module>

<parent-page></parent-page>

顺便说一句。请注意我对 {{...}} 和 [[...]] 的用法。 Use curly braces for two-way bindings and square brackets for one-way bindings.

polymer 1.0 父子页面事件处理

Event Handling between parent and child page in polymer 1.0

javascript

web-component

polymer

polymer-1.0