Polymer 纸张图标按钮应调用父元素函数
我有以下伪组件结构:Polymer 纸张图标按钮应调用父元素函数,polymer,Polymer,我有以下伪组件结构: <polymer-element ...> <parent-custom-element> <custom-tableview-element data="{{data}}"></custom-tableview-element> </parent-custom-element> <script> ready: function () {
<polymer-element ...>
<parent-custom-element>
<custom-tableview-element data="{{data}}"></custom-tableview-element>
</parent-custom-element>
<script>
ready: function () {
this.data = [{ actionButtons: [{ icon: "send" , action: this.onSendAction() },
{ icon: "delete" , action: this.onDeleteAction() }]
},
{ actionButtons: [{ icon: "add" , action: this.onAddAction() },
{ icon: "edit" , action: this.onEditAction() }]]
}];
},
onSendAction : function (e, detail, sender) {
console.log("onSendAction tapped...");
},
onDeleteAction : function (e, detail, sender) {
console.log("onDeleteAction tapped...");
},
onAddAction : function (e, detail, sender) {
console.log("onAddAction tapped...");
},
onEditAction : function (e, detail, sender) {
console.log("onEditAction tapped...");
},
</script>
</polymer-element>
是否可以从此
纸张图标按钮调用父操作(例如onSendAction
或onAddAction
)呢?无法直接从元素内部调用,因为它封装在阴影dom中。但您可以尝试将函数附加到全局变量,如window
<polymer-element name="custom-tableview-element">
<template>
<core-list id="list" data="{{data}}" selectionEnabled="{{selectionEnabled}}"
selection="{{selection}}" height="80" flex multi?={{multi}} style="height:400px;">
<template>
<paper-icon-button icon="{{model.icon}}"
on-tap="{{model.action}}">
</template>
</core-list>
</template>
<script>...</script>
....