polymer

Is there an easy way to bind attributes like disabled or checked to true/false properties? Something like <button disabled="{{myBooleanProperty}}">Ok</button> doesn't work as desired. If myBooleanProperty is false, this sets disabled="false" , which is true as far as HTML is concerned. Is there a filter expression that can hint to the binding parser that the attribute should be completely removed if the value is false? See conditional attributes: http://www.polymer-project.org/docs/polymer/binding-types.html#conditional-attributes Example: <button disabled?="{{myBooleanProperty}}">Ok</button>

I'm looking into solutions for polymer 1.0 and yet I find it hard to understand how this works. Found this https://github.com/Polymer/i18next-element which is unfortunately not even ready yet. Meanwhile I cannot figure out how to use i18next.I'm trying to combine all the info i can find, followed https://github.com/tabacha/javascript-i18n-example/blob/master/i18next/examle.html with any combinations from http://i18next.com/pages/sample.html and made sure to take a look at http://japhr.blogspot.gr/2014/02/getting-started-with-i18next-and-polymer.html . The thing is, I seem to get wrong

How do I load a json file and use the data in a repeating template? This code doesn't produce anything: <dom-module id="name-list"> <template> <iron-ajax auto url="names.json" handleAs="json" lastResponse="{{data}}"></iron-ajax> <template is="dom-repeat" items="{{data}}"> <div>First name: <span>{{item.firstName}}</span></div> <div>Last name: <span>{{item.lastName}}</span></div> </template> </template> </dom-module> <script> Polymer({ is: "name-list" }); </script> Here's my json file (Edit: corrected after vasek's reply): { [ { "firstName": "John", "lastName": "Smith" },{ "firstName": "Jane",

I have got a polymer-element with following html: <polymer-element name="tab-bar"> <template> <button>Hello</button> <template repeat="{{item in items}}"> <div>This element is {{ item }}</div> </template> </template> <script type="application/dart" src="tab_bar.dart"></script> </polymer-element> The underlying dart class looks as follows: import 'package:polymer/polymer.dart'; @CustomTag('tab-bar') class TabBar extends PolymerElement { List items; TabBar(List<String> items) { this.items = toObservable(items); } } With the following approach, it isn't possible to programmatically add the

I want to achieve communication between child parent with Polymer element. Here my index.html <proto-receiver data="message"> <proto-element data="message"></proto-element> </proto-receiver> Both element have their respective "data" property properties: { data: { value: 'my-data', notify: true, } }, In proto-receiver, which is the parent I update "data" by handling simple click <template> <span on-tap="onClick">proto receiver: {{data}}</span> <content></content> </template> onClick: function () { this.data = 'new-message'; }, I want the change to be propagate to the child element as well, as

Say I've got a repeating template: <template bind repeat id='my-template'> This is the bound value: <span id="#myid[x]"> {{}} </span> </template> what can I replace [x] with that will be unique? Access to the loop counter would do the trick, but I'm open to suggestions. I'm adding some utilities to Fancy Syntax (Polymer.dart's default binding syntax now) to help with this, but the basic outline is to run your collection though a filter that will add indices and return a new Iterable. Here's some code that will do it now though: import 'package:fancy_syntax/fancy_syntax.dart'; import 'package

When I write the following inside my <template> -tag, everything works fine: <ul id="breadcrumbList" class="breadcrumb"> <li><a on-click="{{breadcrumbClick}}">{{overviewName}}</a></li> </ul> I dynamically generated a new <li> -element of the same structure, like this: crumb = document.createElement("li"); crumb.innerHTML = '<a on-click="{{breadcrumbClick}}">'+category+'</a>'; But when I click this element, the event-handler isn't called. The event-handler looks like this: breadcrumbClick: function(event, detail, sender) { /*reaction*/ } I did not find any documentation about whether it's

For example, we have root scope <template is="dom-bind" id="app"> <div id="element-on-branch"></div> <my-element></my-element> </template> Then fires an event this.fire('custom') It goes to root and then I need to route this event to . How can I broadcast an event or notify branched elements? Thank you! You can use iron-signals . Fire an iron signal event inside your element: this.fire('iron-signal', {name: 'mysignal', data: "data"}); Then listen to that signal from anywhere in your webapp using an iron-signals element. ... <iron-signals on-iron-signal-mysignal="_handleEvent"></iron-signals>