Question

我想创建一个聚合物元素，并在具有不同viewModel

的多个地方使用它

聚合物元素：

<polymer-element name="my-elem">
<template>
    <div>{{firstName}} {{lastName}}</div>
</template>

<script>
    Polymer("my-elem", {
        ready: function() {
            this.firstName = "Souvik";
            this.lastName = "Basu";
        }
    });
</script>
</polymer-element>

这可以正常工作，并在另一个html页面中使用时显示名称Souvik Basu。但是我没有在元素中硬编码firstName和lastName，而是在使用这个元素时显示两个人的名字：

<my-elem></my-elem>    // This should show Super Man
<my-elem></my-elem>    // This should show He Man

如何在使用JavaScript对象时将JavaScript对象传递给这些元素？

Answer 1

只需制作两个属性。您不需要为该事件添加脚本标记

<my-elem firstName='wir' lastName='lez'></my-elem>

<polymer-element name="my-elem" attributes='firstName lastName' noscript>
    <template><div>{{firstName}} {{lastName}}</div></template>
</polymer-element>

Answer 2

我已经找到了设置viewModel的方法，但这不是一个干净的方法。如果您找到更好的方法，请告诉我：

设置一个属性名称，用于在polymer-element的属性中设置viewModel。假设我们添加属性person。然后按如下方式初始化聚合物元素原型中的相同属性：

<polymer-element name="my-elem" attributes="person">
<template>
    <div>{{person.firstName}} {{person.lastName}}</div>
</template>

<script>
    Polymer("my-elem", {
        person: {},
        ready: function() {
        }
    });
</script>
</polymer-element>

然后像这样使用：

<my-elem id="person1" person='{"firstName": "Super", "lastName": "Man"}'></my-elem>
<my-elem id="person2" person='{"firstName": "He", "lastName": "Man"}'></my-elem>

如果对象很复杂，请使用JSON.stringify方法将对象存储在属性中：

var el = document.getElementById("person1");
el.setAttribute("person", JSON.stringify({
            "firstName": "Super",
            "lastName": "Man",
        }));

聚合：使用不同的视图模型多次使用元素

2 个答案: