polymer-1.0

I'm having trouble understanding how data-binding works now. On my index page I've got an object (obtained as JSON from a RESTful service), which works just fine when applied to a custom element like: <main-menu class="tiles-container ofvertical flex layout horizontal start" menuitems="{{menuitems}}"> </main-menu> var maintemplate = document.querySelector('#fulltemplate'); maintemplate.menuitems = JSON.parse(data.GetDesktopResult); This works as expected, and when I load my page with different users, main-menu changes as it should to show each user's desktop configuration. (This menuitems

I'm triyng to bind a paper-toggle-button to a boolean but it's not working. I already tried binding with $= and evaluating with ?= . I want to show if the user isActive . <template is="dom-repeat" items={{users}}> <button class="heading" aria-expanded$="[[isExpanded(opened{{index}})]]" aria-controls="collapse{{index}}" onclick="toggle('#collapse{{index}}')" >{{item.firstName}} {{item.lastName}}<paper-toggle-button style="float: right;" checked$="{{item.isActive}}">Activo</paper-toggle-button></button> <iron-collapse id="collapse{{index}}" tabindex="0" opened?="{{opened{{index}}}}"> <div class=

I have a parent component with two children components in an "iron-pages" component. The parent should switch pages when it receives an event from one of the children. The problem is, when the event arrives at the parent component, it executes the code to switch children but nothing happens. But, if the code is executed on the parent component itself, then it works. My question is: Why the parent component is unable to switch pages when a child sends an event? Below is the code for the two child components: // this is "child-comm.html" <link rel="import" href="bower_components/polymer/polymer

I am trying this to central justify the paper card heading: paper-card [heading]{ @apply(--center-justified); } but it does not seem to help. kindly suggest heading is not an attribute so you cannot write like that. You basically need to style the .title-text element inside the shadow dom, so use this instead - paper-card::shadow #shadow .header .title-text { display: flex; justify-content: center; } Or use the polymer iron-flex-layout - paper-card::shadow #shadow .header .title-text { @apply(--layout-vertical); @apply(--layout-center); } Update Thanks to @sfeast for pointing it out. Since

Dynamically created html import inside a polymer element Does anyone know how to dynamically add a html import into a polymer element (version 1.0)? The code below doesn't seem to work and complains that the.. HTML element <link> is ignored in shadow tree. Does anyone know any way around this or know a better way? <!-- here is where the created import could go --> <dom-module id="my-component"> <!-- here is where I'd ideally like the import to be created --> <template> <div id="container"> <!--This is where my dynamically loaded element should be placed--> </div> </template> <script> Polymer(

A part of the template of my Polymer component is supposed to render unescaped HTML from a JSON response (yes, it's safe to do so in this case). I used juicy-html ( https://github.com/Juicy/juicy-html ) for this up until now, but it doesn't work anymore with Polymer 1.x. The corresponding part of my template looked pretty much like this: <template if="{{item.part1}}"> <div> <template is="juicy-html" content="{{item.part1.part2 | callFunction}}"></template> </div> </template> I read about a few solutions for injecting HTML with earlier versions of Polymer, but I'm wondering if there is a

I just started playing with Polymer 1.0 and am trying to do a very simple binding to collection. I am able to display text within dom-repeat, but the two-way binding to iron-input does not work. I tried array of strings, and objects. No luck. <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="bower_components/iron-input/iron-input.html"> <dom-module id="hello-world"> <template> <ul> <template is="dom-repeat" items="{{data}}"> <li>{{item.value}}</li> </template> </ul> <ul> <template is="dom-repeat" items="{{data}}"> <li><input is="iron-input" bind-value="{