在这里，我会稍微有些灰白，试图弄清楚如何在单个Polymer组件中拥有多个模板并根据属性解析为特定模板。
这是场景：
成分
<dom-module id="py-test">
<template>
Foo
</template>
<template>
Bar
</template>
<script>
Polymer({
is: "py-test"
})
</script>
</dom-module>
标记
<py-test bar></py-test>
预期结果如果<py-test></py-test>属性为bar，则组件应使用第二个模板。否则，它应该使用第一个模板。
任何人都有关于如何击败Polymer投稿的线索吗？
// 编辑
玛丽亚指出dom-if是一个可能的解决方案。哪一种工作。我使用上面的示例添加了dom-if检查：
<dom-module id="py-test">
<template>
<template is="dom-if" if="[[foo]]">
Foo
</template>
<template is="dom-if" if="[[bar]]">
Bar
</template>
</template>
<script>
Polymer({
is: "py-test",
properties: {
foo: {
type: Boolean,
value: true
},
bar: {
type: Boolean,
value: false
}
}
})
</script>
</dom-module>
但是我看不到如何将其与<py-test>元素本身设置的属性联系起来。
您的编辑工作即将完成。只需删除properties对象中的初始值即可。
<dom-module id="py-test">
<template>
<template is="dom-if" if="[[foo]]">
Foo
</template>
<template is="dom-if" if="[[bar]]">
Bar
</template>
</template>
<script>
Polymer({
is: "py-test",
properties: {
foo: {
type: Boolean,
},
bar: {
type: Boolean,
}
}
})
</script>
</dom-module>
然后，您可以像这样使用它：
<py-test foo></py-test>
<py-test bar></py-test>
这是一个小家伙。
Polymer处理布尔属性的方式可能会有些混乱。如果存在，则关联的属性为true，否则为false。如果设置初始值，则会干扰该值。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句