CODEWITHSUNDEEP
polymer
Jay Ryoo
Jay Ryoo

Reputation: 73

Should attributes be passed objects?

When I am passing in values to a polymer element attribute, I can pass in an object via Polymer's data binding. However, if I decide to leave "polymer-land" and want to set the attribute to an object, I cannot. Should I be passing in objects into attributes?

If the answer is "no, you should use methods for that" then a follow-up question would be, "can I call an element's method without being in the Polymer framework?" For example, if I have a Polymer element: 

<hello></hello>

and I want to access a method it has called "world". In Polymer it would be:

this.$.hello.world();

Is it possible to call this method without being in a Polymer element definition?

Upvotes: 3

Views: 1841

Answers (2)

ebidel
ebidel

Reputation: 24109

From inside Polymer

As you pointed out, inside of Polymer, one can use data binding to bind an object to a published property:

<polymer-element name="other-el">
  <template>
    <hello-world persons="{{persons}}"></hello-world>
  </template>
  <script>
    Polymer('other-el', {
      created: function() {
        this.persons = [{'name': 'Eric'}, {'name': 'Bob'}];
      }
    });
  </script>
</polymer-element>

From outside Polymer

From outside Polymer, Polymer elements also support serialized arrays/objects for attributes if their property type is hinted: 

<hello-world persons="[{'name': 'Eric'}, {'name': 'Bob'}]"></hello-world>

Because .persons is a property on the element, you can also set it in JS:

document.querySelector('hello-world').persons = [{'name': 'Eric'}, {'name': 'Bob'}];

Upvotes: 8

Jay Ryoo
Jay Ryoo

Reputation: 73

So to answer my own question.

I believe attributes should not be passed objects. If you need to pass an object into an element, use element methods.

To call a method, you can use simple element selection and method call.

document.querySelector('hello').world();

I thought I had tried this and it didn't work.

-Jay

Upvotes: 1

Related Questions