Polymer Paper 对话框无法在 Safari 或 Firefox 上打开
Polymer Paper Dialog not opening on Safari or Firefox
尝试在单击纸张按钮时打开此纸张对话框,但它似乎不想在 Chrome 之外工作。我觉得这个问题与它在 dom-repeat 中的事实有关,但我不确定你能给我的任何帮助将不胜感激。我在 Safari 中遇到的错误是 "TypeError: dialog1.toggle() is not a function. (In 'dialog1.toggle()','dialog1.toggle' is undefined)"。在 Firefox 中,我刚得到 "TypeError: dialog1.toggle is not a function"。这是我的代码,希望有人能指出正确的方向。
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/demo/simple-dialog.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
</head>
<body class="unresolved">
<template is="dom-bind">
<template is="dom-repeat" items="{{data}}">
<paper-button raised onclick$="dialog{{item.id}}.toggle()">{{item.series}} </paper-button>
<simple-dialog id$="dialog{{item.id}}">
<h2>{{item.series}}</h2>
<p>{{item.data}}</p>
</simple-dialog>
<br />
</template>
<iron-ajax auto id="GetData" url="get_category_data.php" handle-as="json" last-response="{{data}}" ></iron-ajax>
</template>
</body>
使用 getElementById
似乎工作正常。这是在 Firefox 中为我工作的代码。希望它也适用于 safari
<template is="dom-bind">
<template is="dom-repeat" items="{{data}}">
<paper-button raised onclick$="toggleDialog({{item.id}})">{{item.series}}</paper-button>
<simple-dialog id$="dialog{{item.id}}">
<h2>{{item.series}}</h2>
<p>{{item.data}}</p>
</simple-dialog>
<br />
</template>
<iron-ajax auto id="GetData" url="get_category_data.json" handle-as="json" last-response="{{data}}" ></iron-ajax>
</template>
<script>
function toggleDialog(id){
var dialog = document.getElementById('dialog'+id);
dialog.toggle();
}
</script>
旧线程,但我将为 Polymer1.0 添加上述变体
<div>
VAT check date: <paper-button value="paperbuttontest" raised on-tap="_paperDialogButtonEdit">{{buyer1.vat_check_date}}</paper-button>
<paper-dialog id="vat_check_date_dialog_edit">
<calendar-lite name="date.buyer1.vat_check_date" min-date="2017,3,1"></calendar-lite>
</paper-dialog>
</div>
在聚合物中
_paperDialogButtonEdit: function (event) {
//console.log(" event.target = ",event.target.getAttribute('value'));
var dialog = document.getElementById('vat_check_date_dialog_edit');
dialog.toggle();
},
尝试在单击纸张按钮时打开此纸张对话框,但它似乎不想在 Chrome 之外工作。我觉得这个问题与它在 dom-repeat 中的事实有关,但我不确定你能给我的任何帮助将不胜感激。我在 Safari 中遇到的错误是 "TypeError: dialog1.toggle() is not a function. (In 'dialog1.toggle()','dialog1.toggle' is undefined)"。在 Firefox 中,我刚得到 "TypeError: dialog1.toggle is not a function"。这是我的代码,希望有人能指出正确的方向。
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/demo/simple-dialog.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
</head>
<body class="unresolved">
<template is="dom-bind">
<template is="dom-repeat" items="{{data}}">
<paper-button raised onclick$="dialog{{item.id}}.toggle()">{{item.series}} </paper-button>
<simple-dialog id$="dialog{{item.id}}">
<h2>{{item.series}}</h2>
<p>{{item.data}}</p>
</simple-dialog>
<br />
</template>
<iron-ajax auto id="GetData" url="get_category_data.php" handle-as="json" last-response="{{data}}" ></iron-ajax>
</template>
</body>
使用 getElementById
似乎工作正常。这是在 Firefox 中为我工作的代码。希望它也适用于 safari
<template is="dom-bind">
<template is="dom-repeat" items="{{data}}">
<paper-button raised onclick$="toggleDialog({{item.id}})">{{item.series}}</paper-button>
<simple-dialog id$="dialog{{item.id}}">
<h2>{{item.series}}</h2>
<p>{{item.data}}</p>
</simple-dialog>
<br />
</template>
<iron-ajax auto id="GetData" url="get_category_data.json" handle-as="json" last-response="{{data}}" ></iron-ajax>
</template>
<script>
function toggleDialog(id){
var dialog = document.getElementById('dialog'+id);
dialog.toggle();
}
</script>
旧线程,但我将为 Polymer1.0 添加上述变体
<div>
VAT check date: <paper-button value="paperbuttontest" raised on-tap="_paperDialogButtonEdit">{{buyer1.vat_check_date}}</paper-button>
<paper-dialog id="vat_check_date_dialog_edit">
<calendar-lite name="date.buyer1.vat_check_date" min-date="2017,3,1"></calendar-lite>
</paper-dialog>
</div>
在聚合物中
_paperDialogButtonEdit: function (event) {
//console.log(" event.target = ",event.target.getAttribute('value'));
var dialog = document.getElementById('vat_check_date_dialog_edit');
dialog.toggle();
},