How to pass data from JavaScript code to Polymer custom element?

Question

I want to pass data that I have on a variable to a Polymer component via attribute.

This is the code:

<script>
  var item1 = {
      title: "Title 1",
      status: "accepted"
  };
</script>

<bm-card item="{{item1}}" otherAttribute="hello">

The otherAttribute gets the data on the custom element but item does not arrive.

How could item attribute be populated from the item1 variable ?

Answer 1

To use data-binding outside of <polymer-element> you need <template is="auto-binding">: https://www.polymer-project.org/docs/polymer/databinding-advanced.html#bindingoutside

However, you can just set the property directly in js:

<bm-card otherAttribute="hello">

document.addEventListener('polymer-ready', function() {
  document.querySelector('bm-card').item = item1;
});

The reason you have to wait for polymer-ready is to ensure the element has upgraded in the DOM and has it's properties/methods defined.