Question

我在这里略微变灰，试图找出如何在单个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，则组件应使用第二个模板。否则，它应该使用第一个模板。

任何人都知道如何将聚合物投入提交？

//编辑

Maria指出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>元素本身设置的属性联系起来。

Answer 1

你的编辑几乎就在那里。只需删除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>

这是plunk。

Polymer处理布尔属性的方式可能会有点混乱。如果它们存在，则关联属性为true，否则为false。如果您设置初始值，则会干扰它。

Polymer：基于属性的同一组件的多个模板？

1 个答案: