如何使用 Polymer 添加动态扩展元素?
How to add dynamically extended element with Polymer?
我有按钮:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-input/core-input.html">
<polymer-element name="count-button" extends="button" on-click="increment">
<template>
<content>Increment: </content>
</template>
<script>
Polymer({
counter: 0,
increment: function(e, detail, sender) {
this.counter++;
alert(this.counter);
}
})
</script>
</polymer-element>
我在 html 中成功使用了它:
<button is="count-button"></button>
如何在js中添加这样的按钮?我的错误版本是 (ready function):
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name='my-input'>
<template>
my input
<style>
</style>
</template>
<script>
Polymer('my-input', {
publish: {
},
ready: function() {
var node = document.createElement("button");
node.setAttribute('is', 'count-button');
this.shadowRoot.appendChild(node);
}
});
</script>
</polymer-element>
我自己找到了解决方案,就像这两行一样简单:
var node = document.createElement("button", 'count-button');
this.shadowRoot.appendChild(node);
所以完整的答案在这里:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name='my-input'>
<template>
my input
<style>
</style>
</template>
<script>
Polymer('my-input', {
publish: {
},
ready: function() {
# only these 2 lines
var node = document.createElement("button", 'count-button');
this.shadowRoot.appendChild(node);
}
});
</script>
</polymer-element>
我有按钮:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-input/core-input.html">
<polymer-element name="count-button" extends="button" on-click="increment">
<template>
<content>Increment: </content>
</template>
<script>
Polymer({
counter: 0,
increment: function(e, detail, sender) {
this.counter++;
alert(this.counter);
}
})
</script>
</polymer-element>
我在 html 中成功使用了它:
<button is="count-button"></button>
如何在js中添加这样的按钮?我的错误版本是 (ready function):
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name='my-input'>
<template>
my input
<style>
</style>
</template>
<script>
Polymer('my-input', {
publish: {
},
ready: function() {
var node = document.createElement("button");
node.setAttribute('is', 'count-button');
this.shadowRoot.appendChild(node);
}
});
</script>
</polymer-element>
我自己找到了解决方案,就像这两行一样简单:
var node = document.createElement("button", 'count-button');
this.shadowRoot.appendChild(node);
所以完整的答案在这里:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name='my-input'>
<template>
my input
<style>
</style>
</template>
<script>
Polymer('my-input', {
publish: {
},
ready: function() {
# only these 2 lines
var node = document.createElement("button", 'count-button');
this.shadowRoot.appendChild(node);
}
});
</script>
</polymer-element>