Question

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

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

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

现在，在某些活动的基础上，子页面会触发一个带有新数组的事件。

例如，在子页面中：

this.fire('eventPerformed', newArray);

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

如何实现它？

编辑：我的子页面看起来像这样。

＆＃13;

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

＆＃13;

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

Answer 1

child-page只要template is="dom-repeat" items="[[itemArray]]"属性更新，就会自动重新呈现itemArray。

只需将notify: true添加到itemArray中的child-page媒体资源即可启用与parent-page元素的双向绑定。每当parent-page的{{1}}发生变化时，item-array也会收到通知{（3}}）。

这是一个小例子：

child-page

顺便说一下。请注意我对<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>和{{...}}的使用情况。 Polymer documentation on this topic

聚合物1.0中父页和子页之间的事件处理

1 个答案: