在聚合物对话框演示中，他们的代码如下：
In [5]: class my_rf(RandomForestClassifier):
def __init__(self, *args, **kwargs):
RandomForestClassifier.__init__(self, *args, **kwargs)
def __str__(self):
superclass_name = RandomForestClassifier.__name__
return "foo_" + superclass_name + "(" + RandomForestClassifier.__str__(self).split("(", 1)[1]
In [6]: forest = my_rf()
In [7]: print forest
...
RuntimeError: scikit-learn estimators should always specify their parameters in the signature of their __init__ (no varargs). <class '__main__.my_rf'> with constructor (<self>, *args, **kwargs) doesn't follow this convention.
我想将按钮（或我的案例中的fab）和对话框包装到我自己的单独Web组件中。
我创建了一个试图包裹按钮和事件的对话框按钮：
<script src=
https://github.com/webcomponents/webcomponentsjs/blob/master/webcomponents.js>
<link rel="import" href="https://github.com/Polymer/polymer/blob/master/polymer.html">
<link rel="import" href="https://github.com/PolymerElements/paper-button/blob/master/paper-button.html">
<link rel="import" href="https://github.com/PolymerElements/paper-dialog/blob/master/paper-dialog.html">
<section onclick="clickHandler(event)">
<h4>Transitions</h4>
<paper-button data-dialog="animated">transitions</paper-button>
<paper-dialog id="animated" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
<h2>Dialog Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</paper-dialog>
</section>
<script>
function clickHandler(e) {
var button = e.target;
while (!button.hasAttribute('data-dialog') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('data-dialog')) {
return;
}
var id = button.getAttribute('data-dialog');
var dialog = document.getElementById(id);
if (dialog) {
dialog.open();
}
}
</script>
允许我以下工作：
<paper-fab class="addbutton" icon="add" onclick="clickHandler(event)"></paper-fab>
</template>
<script>
Polymer({
is: 'my-dialog-button',
properties: {
dialog_id: {
type: String
},
}
})
function clickHandler(e) {
var button = e.target;
while (!button.hasAttribute('dialog_id') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('dialog_id')) {
console.log("you have no element with 'dialog_id' defined")
return;
}
var id = button.getAttribute('dialog_id');
console.log("dialog " + id + " requested")
var dialog = document.getElementById(id);
if (dialog) {
dialog.open();
} else {
console.log("dialog " + id + " does not exist")
}
}
</script>
但是，只要我将对话框包装在自己的组件中，就会在该dom上下文中不再提供“id”。所以它不起作用。
我认为ID方法确实不起作用，我需要将对话框“打开”绑定到“onclick”按钮，但我不知道该怎么做，我发现：
https://www.polymer-project.org/1.0/docs/devguide/templates.html
但是我不知道如何将它应用于包裹的元素（或者至少到目前为止我在这种方法上都失败了。）
总之，分离2个包装的Web组件的正确方法是什么？它是什么样的？
答案 0 :(得分：2)
您希望有两个元素my-dialog-button和my-dialog。你的按钮元素需要一些重新工作。我们需要在clickHandler块内移动Polymer({ })函数。还建议使用on-tap事件而不是on-click。 on-tap可以在桌面和移动设备上获得更一致的体验。
<script>
Polymer({
is: 'my-dialog-button',
properties: {
dialogId: {
type: String
}
},
clickHandler: function (e) {
var button = e.target;
while (!button.hasAttribute('dialogId') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('dialogId')) {
console.log("you have no element with 'dialogId' defined");
return;
}
var id = button.getAttribute('dialogId');
console.log("dialog " + id + " requested");
var dialog = document.getElementById(id);
if (dialog) {
dialog.open();
}
else
{
console.log("dialog " + id + " does not exist")
}
}
});
像那样。聚合物的主要内容之一是将所有javascript保留在Polymer({ })块中。这样你就可以利用聚合物的所有好处，而不会遇到像这个问题一样的范围问题。
尝试将对话框包装到另一个元素时，问题仍然存在。由于元素的范围，您无法再访问dialog.open()方法。 dialog.open()只能在my-dialog元素内访问。要解决此问题，您需要实现自己的.open()方法。代码看起来像这样：
<template>
<paper-dialog id="dialog">
//Your dialog content
</paper-dialog>
</template>
<script>
Polymer({
is: 'my-dialog',
open: function(){
this.$.dialog.open();
}
});
</script>
在索引或您使用它的其他元素中的样子。
<my-dialog-button dialog-id="testdialog"></my-dialog-button>
<my-dialog id="testdialog"></my-dialog>
这样您就可以在my-dialog元素中打开对话框。
工作示例：
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-fab/paper-fab.html" rel="import">
<link href="paper-dialog/paper-dialog.html" rel="import">
</head>
<body>
<dom-module id="my-dialog-button">
<style>
paper-fab.addbutton {
position: absolute;
right: -27px;
top: 34px;
}
</style>
<template>
<paper-fab class="addbutton" icon="add" on-tap="clickHandler"></paper-fab>
</template>
<script>
Polymer({
is: 'my-dialog-button',
properties: {
dialogId: {
type: String
}
},
clickHandler: function(e) {
var button = e.target;
while (!button.hasAttribute('dialogId') && button !== document.body) {
button = button.parentElement;
}
if (!button.hasAttribute('dialogId')) {
console.log("you have no element with 'dialogId' defined");
return;
}
var id = button.getAttribute('dialogId');
console.log("dialog " + id + " requested");
var dialog = document.getElementById(id);
if (dialog) {
dialog.open();
} else {
console.log("dialog " + id + " does not exist")
}
}
});
</script>
</dom-module>
<!--- ---------------------------------------------my dialog------------------------------------------------>
<dom-module id="my-dialog">
<template>
<paper-dialog id="dialog">
<h2>"hello world"</h2>
<p>"I am bob"</p>
</paper-dialog>
</template>
<script>
Polymer({
is: 'my-dialog',
open: function() {
this.$.dialog.open();
}
});
</script>
</dom-module>
<!-----------------------------page--------------------------------------->
<my-dialog-button dialogId="add-button"></my-dialog-button>
<my-dialog id="add-button"></my-dialog>
</body>
旁注：
编写聚合物元素时，您不需要在Polymer({ });之外声明任何javascript代码。如果在该块之外声明代码，则项目内部的范围可能会变得混乱。