我有这样的模板
<template>
<button class="y-button" id="el" disabled?="{{disabled !== undefined}}">
<span class="y-button__text"><content></content></span>
</button>
</template>
如何将标记名称更改为另一个(例如<a>
)取决于某些属性,例如
<my-button url="http://example.org"></my-button>
?
我试过
<template>
<{{tagName}}></{{tagName}}>
</template>
但它不起作用。
答案 0 :(得分:4)
您可以使用injectBoundHTML
:
var tag = 'x-el';
var html = '<' + tag + ' item="{{item}}"></' + tag + '>';
this.injectBoundHTML(html, this.$.container);
<script src="http://www.polymer-project.org/webcomponents.min.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="x-el" attributes="item" noscript>
<template>
{{item.name}}
</template>
</polymer-element>
<polymer-element name="my-element">
<template>
<div id="container"></div>
</template>
<script>
Polymer({
ready: function() {
this.item = {name: 'John Smith'};
var tag = 'x-el';
var html = '<' + tag + ' item="{{item}}"></' + tag + '>';
this.injectBoundHTML(html, this.$.container);
}
});
</script>
</polymer-element>
<my-element></my-element>
&#13;
答案 1 :(得分:1)
您无法通过数据绑定执行此操作。绑定表达式仅允许在标记的文本内容或属性值中使用:
https://www.polymer-project.org/docs/polymer/binding-types.html#node-bindings
您也无法使用数据绑定插入整个标记,因为数据绑定表达式的内容在插入之前是HTML转义的。参见:
https://www.polymer-project.org/docs/polymer/expressions.html#expression-syntax
“您无法使用表达式插入HTML。为了避免XSS问题,表达式的输出在作为绑定值插入之前是HTML转义的。”
如果您只有两个可能的标签,则可以使用条件模板语法:
<template if="{{condition}}">
<tagOne></tagOne>
</template>
<template if="{{! condition}}">
<tagTwo></tagTwo>
</template>
对于更复杂的情况,您可能希望使用@skmvasu建议的JavaScript和innerHTML。如果您需要数据绑定在里面插入插入的HTML,您可以使用injectBoundHTML方法:
https://www.polymer-project.org/docs/polymer/databinding-advanced.html#boundhtml