1

我想创建一个聚合物元素并在具有不同 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>

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

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

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

4

2 回答 2

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>
于 2015-04-01T13:43:58.877 回答
0

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

在聚合物元素的属性中设置用于设置 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",
        }));
于 2015-04-01T10:50:34.537 回答