gpt4 book ai didi

javascript - polymer 数据绑定(bind)到方法

转载 作者:行者123 更新时间:2023-12-03 05:45:39 24 4
gpt4 key购买 nike

我正在使用包含 <paper-dialog> 的自定义元素,以便我可以在我的应用程序中重用对话框样式。

结构如下:

Polymer({
is: 'dialog-confirm',

properties: {
title: {
type: String,
value: 'Dialog Title',
reflectsToAttribute: true
},
message: {
type: String,
value: 'Dialog message',
reflectsToAttribute: true
}
},

/**
* Triggered when the document is loaded
*/
ready: function () {
var me = this;
},

/**
* Open the dialog
*/
open: function () {
this.$.dialog.open();
}
});

然后,我按如下方式声明我的组件,以便准备好“准备好的”对话框:

(为了简洁起见,我删除了 <link import="...">)

<dom-module id="dialog-confirm">
<template>
<style>
</style>

<paper-dialog id="confirmation"
modal with-backdrop
entry-animation="slide-from-top-animation"
exit-animation="fade-out-animation"
on-iron-overlay-closed="_onSignoutConfirm">
<h2>{{title}}</h2>
<paper-dialog-scrollable>
<p>{{message}}</p>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button class="normal" dialog-dismiss>NO</paper-button>
<paper-button class="positive" dialog-confirm>YES</paper-button>
</div>
</paper-dialog>

</template>
<script type="text/javascript" src="dialog-confirm.js"></script>
</dom-module>

问题是这是一个组件,我想在组件外部公开 iron-overlay-close 事件。否则,当我重新使用组件时,我无法将其数据绑定(bind)到新方法,如下所示:

<dialog-confirm id="myDialog" on-iron-overlay-closed="_myCustomMethod"></dialog-confirm>

这可能吗?

最佳答案

iron-overlay-close 事件已经从子组件中冒出,如以下演示所示。如果它没有为您出现,则问题可能是由您的问题中未显示的其他内容引起的。

<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<x-foo></x-foo>

<dom-module id="x-foo">
<template>
<x-dialog on-iron-overlay-closed="_myCustomMethod"></x-dialog>
</template>
<script>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_myCustomMethod: function() {
console.log('_myCustomMethod: overlay closed');
}
});
});
</script>
</dom-module>

<dom-module id="x-dialog">
<template>
<paper-dialog opened on-iron-overlay-closed="_onIronOverlayClosed">
<div class="buttons">
<paper-button dialog-dismiss>Ok</paper-button>
</div>
</paper-dialog>
</template>
<script>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-dialog',
_onIronOverlayClosed: function() {
console.log('_onIronOverlayClosed: overlay closed');
}
});
});
</script>
</dom-module>
</body>

codepen

关于javascript - polymer 数据绑定(bind)到方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40338729/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com