Обработка событий между родительской и дочерней страницей в полимере 1.0

Question

У меня есть родительский полимерный элемент, называемый родительской страницей, и дочерний элемент, называемый дочерней страницей.

родительская страница вызывает дочернюю страницу и передает массив с ней. для например, в родительской странице:

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

Теперь, на основе определенной активности ребенка страницы пожары события с новым массивом.

например, в детской странице:

this.fire('eventPerformed', newArray); 

Этот массив прослушивается на родительской странице и полученных с ожидаемыми значениями. Теперь я хочу передать этот новый массив на дочернюю страницу таким образом, чтобы дочерняя страница отображалась в соответствии с новым массивом.

Как это достичь?

Редактировать: моя дочерняя страница выглядит так.

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

 
<style> 
 
\t 
 
</style> 
 

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

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

 

 
\t \t } 
 
\t }); 
 

 
</script> 
 

 
</dom-module>

Есть ли способ, я могу назвать шаблон повторения с новым массивом в том же детской странице? Или мне нужно запустить событие на родительскую страницу и снова вызвать дочернюю страницу? Как достичь этого в любом случае?

Answer 1

child-page re-render template is="dom-repeat" items="[[itemArray]]" автоматически при его itemArray Недвижимость была обновлена.

Просто добавьте notify: true к itemArray собственности в child-page, чтобы позволить двухстороннюю-связывание с parent-page элементом. Затем parent-page также уведомляется всякий раз, когда item-array из child-page изменился (см. 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> 

Btw. обратите внимание на мое использование {{...}} и [[...]]. Use curly braces for two-way bindings and square brackets for one-way bindings.