How to pass data from JavaScript code to a Polymer user element?

Question

I want to pass the data that I have to a variable to a Polymer component through an attribute.

This is the code:

<script> var item1 = { title: "Title 1", status: "accepted" }; </script> <bm-card item="{{item1}}" otherAttribute="hello"> 

Another attribute receives data in the user element, but the element does not arrive.

How can the item attribute be populated from 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 simply set the property directly in js:

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

The reason you need to wait for polymer preparation is to ensure that the element is updated in the DOM and determine its properties / methods.