Polymer: using the element multiple times with different viewmodels

advertisements

I want to create a polymer element and use it in multiple places with different viewModel

polymer element:

<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>

This works properly and shows name Souvik Basu when used in another html page. But instead of hard coding firstName and lastName inside the element, I want to show names of two persons while using this element:

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

How can I pass JavaScript objects to these elements while using them?


Just make two attributes. You don't event need a script tag for that

<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>