polymer,web-component , Is it possible to set Polymer expressions dynamically?


Is it possible to set Polymer expressions dynamically?

Question:

Tag: polymer,web-component

I want to set filters dynamically. Is it possible?

dynamicFilter is a variable with name of the Polymer expression.

<template is="auto-binding">
  <span>{{value | dynamicFilter}}</span>
</template>

Answer:

AFAIK, there is no handy way to assign Filter to element in runtime. But there is a simple workaround you might find useful:

We are to define the staticFilter function, which would be a proxy (wrapper) to calls to dynamicFilters. Assuming dynamic filters to be instances of PolymerExpression, this might be put together as follows:

<polymer-element name="my-element" attributes="dynamicFilter">
  <template>
    <span>{{value | staticFilter(dynamicFilter)}}</span>
  </template>
  <script>
    PolymerExpressions.prototype.uppercase = function(input) {
      return input.toUpperCase();
    },
    PolymerExpressions.prototype.lowercase = function(input) {
      return input.toLowerCase();
    },

    Polymer({
      value: '¡Hola!',

      dynamicFilter: null,

      staticFilter: function(v, df) {
        return df ? PolymerExpressions.prototype[df](v) : v;
      }

    });
  </script>
</polymer-element>
<my-element></my-element>
<my-element dynamicFilter='uppercase'></my-element>
<my-element dynamicFilter='lowercase'></my-element>

Now you are free to set the dynamicFilter attribute of my-element even in runtime.

The reason is that filters are compiled and bound during element initialization; for security reasons there is no eval behind and therefore you cannot simply pass the arbitrary dynamic value there. On the other hand, filters are ready to receive parameters and that fact actually does the trick. BTW, you might even pass the function instance there whether you are not satisfied with PolymerExpressions for this purpose.


Related:


How to use Polymer template auto-binding in Polymer1.0?


html,css,html5,polymer,polymer-1.0
Polymer doesn't provide much detailed documentation as now. So I am wondering how to use the template auto-binding feature. Previously with polymer 0.5 <template is=auto-binding> would work. But doesnt work any more with Polymer 1.0. My use-case is not building custom elements using Polymer instead build a web app using...

Polymer 1.0 strange behaviour on properties


polymer
I'm just learning polymer (1.0) so please bear with me. I'm using express.js to return some array of JSON.stringified items and for-each them, so the result is as follows (in HTML): <fighter-profile fighter="{&quot;country&quot;:&quot;USA&quot;,&quot;countryFullName&quot;:&quot;United States&quot;,&quot;name&quot;:&quot;Frank...

How do I use dom-repeat in Polymer binding to a dictionary


polymer
I am trying to bind to data below which is a dictionary <template is="dom-repeat" items="{{data}}"> </template> I have found a similar question here Polymer: How to loop and render HTML to screen <template repeat="{{customer, i in customers}}"> <div>{{i}}, {{customer.name}}</div> </template> but I am not sure if this applies to Polymer...

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox


firefox,dart,polymer
I use Dart Polymer PaperDialogs containing CoreAnimatedPages. The idea is to have popups in which you can click through multiple option views. Example repository available at: https://bitbucket.org/neogucky/polymer-dialog-problem/ DialogView: view.html <link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="packages/paper_elements/paper_button.html"> <link rel="import" href="packages/paper_elements/paper_dialog.html"> <link rel="import"...

core-animated-pages in Polymer 1.0


polymer,web-component,polymer-1.0
I noticed that there is no substitute for core-animated-pages in Polymer 1.0 (there is no iron-animated-pages). Am I missing something? Is there any other way to implement similar functionality? Any answer greatly appreciated.

How to style paper elements inside of a custom element (Polymer 1.0)?


html,css,polymer,polymer-1.0
Whatever I do, I can't seem to be able to style paper-elements using custom properties inside a custom element: <dom-module id="ts-dashboard"> <style> :host { display: block; --paper-tabs-selection-bar-color : #ED1C23; } paper-tabs { background-color : #962E33; } </style> <template> <paper-tabs selected="{{selected}}"> <paper-tab>Choice 1</paper-tab> <paper-tab>Choice 2</paper-tab> </paper-tabs> <!-- some more elements... -->...

Polymer 1.0 in Ember-cli, wrong appearance


javascript,ember.js,polymer,frontend,ember-cli
I have managed to integrate Polymer 1.0 to my Ember-cli project. This my Brocfile var vulcanize = require('broccoli-vulcanize'); var pickFiles = require('broccoli-static-compiler'); var mergeTrees = require('broccoli-merge-trees'); var EmberApp = require('ember-cli/lib/broccoli/ember-app'); var app = new EmberApp({ compassOptions: { sassDir: "app/styles/main", outputStyle: 'expanded' } }); //app.import("./bower_components/webcomponentsjs/webcomponents-lite.min.js"); var polymerVulcanize = vulcanize('app', { input:...

Computed binding doesn't work with on-click (Polymer)


javascript,html,polymer
<template is="dom-repeat" items="{{myItems}}"> <div on-click="{{ComputedBindingFunction(item)}}">Foo</div> </template> This yields an error saying: listener method {{ComputedBindingFunction(item)}} not defined Shouldn't the function be executed, instead of literally trying to attach the function name with {{}}'s to on-click according to the docs? Note that ComputedBindingFunction returns a function....

How can I access item in parent repeat template while in filter


javascript,html,templates,polymer
<iron-pages> <template is="dom-repeat" items="{{fruit_categories}}" as="category"> <div> <template is="dom-repeat" items="{{all_fruits}}" as="fruit" filter="isThisFruitInTheRightCategory"> <!-- Some more stuff --> <span>{{fruit.weight}}</span> <span>{{fruit.age}}</span> <!-- ... --> </template> </div> </template> </iron-pages> isThisFruitInTheRightCategory: function(fruit){ return fruit.category === /* Q: How do I get the current category? */ } Suppose I...

Inheritance of customized polymer element in version 1.0


polymer,polymer-1.0
I have two polymer elements which have similar characteristics. I'm trying to "merge" those two to one element. What I see in the documentation is that custom elements can not be inherited in polymer 1.0. It starts here: <div title="{{tile.description}}" class="flex-item"> <template is='dom-if' if='{{typeIsSingle}}'> <single-item-tile tile='{{tile}}'></single-item-tile> </template> <template is='dom-if' if='{{typeIsGrouped}}'>...

Dart - Polymer Unit Testing. Not able to reference dom elements after click event


dart,polymer,dart-polymer
Not able to reference dom elements. Most of the test case works except for the last expectation in ClickSignInButton when I want to make sure I can evaluate error message div when form is submitted without any data. expect(document.querySelector('qme-header').shadowRoot .querySelector('#headerErrorDiv'), isNotNull); always fails and headerErrorDiv is null even though its...

Having trouble applying a mixin in Polymer


html,css,polymer,polymer-1.0
I'm having problems getting a mixin to work in polymer. I've created --test-theme but it's not applying the style inside the element. Any ideas where I'm going wrong? story-card.html <dom-module id="story-card"> <style> :host { display: block; box-sizing: border-box; } #story-card { min-height: 5em; max-width: 45%; margin-left: auto; margin-right: auto; padding:...

How to notify page transition with iron-pages


polymer,polymer-1.0
I am playing around with the Polymer Starter Kit by building a simple application which has a few pages. I would like for one of the pages to display a list of items that it loads from the server. The issue is that this list must load only when the...

Change google-map center using Polymer


polymer
I'm working on a custom element using Polymer. I want to change its center after it was rendered. I can't found it on Polymer docs. Anyone could help me? <dom-module id="my-map"> <template> <google-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="15"> </google-map> </template> <script> Polymer({ is: "my-map" // I want to change map center here...

Polymer 1.0 app-theme only affecting index.html and not on custom elements


css,polymer
I'm using the Polymer Starter Kit, and I wanted to move the scaffold into it's own element <main-scaffold>. There are styles in app-theme.html that applied to it before I moved it into from index.html into it's own element, but now none of the styles apply. This is the case for...

How to Bind Attribute from Custom Polymer Element to angularjs


javascript,angularjs,polymer
I created a custom element called my-slider-input which computes values from a user input. I need to take use these values in an angular controller. I'm wondering what's the best practice to do this? Given this polymer element: <dom-module id="my-slider-input"> <style> :host { display: block; } </style> <template> <button id="input1">Input...

Polymer 1.0 services issue


polymer,web-component
I'm working on a reddit client using polymer to check out web compoments technologies. I started with the 0.5 version and got back on this project recently. That when I found out that polymer had the 1.0 released so I started over (as it wasn't that advanced anyway). I have...

Using Polymer iron-ajax in repeating template


polymer
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({...

dom-if doesn't get updated in dom-repeat


javascript,html,templates,polymer,polymer-1.0
<template is="dom-repeat" items="{{fruit_list}}" as="fruit"> <template is="dom-if" if="{{fruit.isOrange}}"> I'm an orange! </template> </template> Here I have a dom-if template inside a dom-repeat template. It works great if the value of fruit.isOrange has already been finalized. However if not, for example, it was true when before but now I change it to...

Click event not firing in polymer paper-icon-button


javascript,polymer
I have the following page defined <!DOCTYPE html> <html> <head> <title>Practice List</title> <link rel="import" href="elements/elements.html" /> <link rel="stylesheet" type="text/css" href="Styles/styles.css" /> <!-- google fonts definitions --> <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> </head> <body unresolved...

How to style Polymer's toolbar background in 0.5?


polymer,toolbar
I'm having issues trying to set the full background color of the toolbar in Polymer 0.5 when using core-scaffold. What I've tried so far on Stackoverflow only sets the left menu side, but not the right content side. How does one set the background color for the full toolbar? Below...

how to execute a function on-close or on dismiss of paper-dialog for polymer 1.0?


javascript,polymer,web-component
Here is my code for polymer version 1.0. This is paper-dialog element i want to execute a function on closing this dialog. How can i do that? <paper-dialog id="paper-id" entry-animation="scale-up-animation" exit-animation="scale-down-animation" > <sample-element></sample-element> </paper-dialog> ...

Inheriting dimensions only if they are specified on the parent element


css,web-component,custom-element
I'm developing a bunch of custom elements for an API using a web components polyfill and I've hit a snag. One of the elements may contain an <img> or <canvas> element. If no dimensions are specified for the custom element, it should be the default size of the child element....

Duplicate values with Polymer template repeat


templates,polymer,repeat,web-component
Okay any I have a strange thing happening with my polymer template <polymer-element name="my-playlist" attributes="info"> <template> <core-ajax url="/getlist" method="POST" auto response="{{data}}" handleAs="json"> </core-ajax> <style> </style> <core-selector class="list"> <template repeat="{{k in data}}"> <core-ajax url="http://api.soundcloud.com/tracks/{{k.track}}.json?client_id=9a6dccd301f1d1cbab751e0a1ec82e2e" method="GET" auto response="{{response}}" handleAs="json">...

Change style programmatically


polymer,polymer-1.0
I'm attempting to follow the Custom property API for Polymer elements docs with regards to updating an element's CSS properties (and styles) programmatically but can't seem to get it working. Here is my current attempt: <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> <dom-module id="my-namecard"> <style> :host { --color: green; } span { color: var(--color,...

Polymer Data-Binding will not replace


javascript,polymer,web-component
I have a polymer element that refuses to bind, and I can't figure out why. The rendered output is just sending the raw {{varName}} rather than replacing it with the appropriate value. However, formulas (with the [[fn(arg)]] syntax) and binding to tags (with the $="{{varName}} syntax) works fine. Any idea...

google-signin don't return user info


polymer,web-component,google-signin,google-web-component
I am using google-signin element from Google Web Components, but I don't know how to return user info. <google-signin client-id="{{my-id}}" scopes="email profile" signed-in="{{signedIn}}"></google-signin> I tried to write some JS function but it didn't work. function (signedIn) { var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile(); console.log('Name: ' + profile.getName()); console.log('Image: ' + profile.getImageUrl()); }...

Why does the polymer property binding need a tag in my template?


javascript,html,polymer
I am trying to understand how Polymer renders properties in the template of a custom element. I'm seeing some behavior that I can't explain, where some properties are being rendered in one case (when surrounded by tags), but not in another (when tags are not present in the template). To...

Computed bindings in auto-binding templates in Polymer 1.0


polymer,polymer-1.0
How can I define computed bindings in auto-binding templates (i.e. those declared as <template is='dom-bind'>...</template>)?

Set focus for paper-input via radio button


input,radio-button,focus,polymer,paper-elements
In Polymer (1.0), how can I set the focus of the iron-input when (as example) radiobutton 'radio1' is selected. <div> <div>Title:</div> <paper-radio-group> <paper-radio-button name="radio1">Radio1Label</paper-radio-button> <paper-radio-button name="radio2">Radio2Label</paper-radio-button> </paper-radio-group> <paper-input-container> <input is="iron-input"> </paper-input-container> </div> ...

Polymer 1.0 - Issue selecting dynamic element by id


javascript,web-component,polymer-1.0
I am trying to select an element by id that was created dynamically: <dom-module id="filter-box"> <style> :host { display: block; } </style> <template> <h4 id="title">{{title}}</h4> <paper-checkbox id="test">test</paper-checkbox><br> <template is="dom-repeat" items="{{filters}}"> <paper-checkbox id="{{item}}">{{item}}</paper-checkbox><br> </template> </template> </dom-module> <script> (function () { Polymer({ is: 'filter-box',...

Polymer 1.0: Two-way bindings with input elements


javascript,polymer,custom-element
Code Consider the following Polymer custom element: <dom-module id="test-element"> <template> <input type="text" value="{{value}}"> <button>Reset</button> </template> <script> Polymer({ is: 'test-element', properties: { 'value': { type: String, reflectToAttribute: true, notify: true, value: null } } }); </script> </dom-module> I use this custom element in my index.html as follows: <html> <head> <script type="text/javascript"...

Binding imperatively


binding,polymer
Is there a way to set up bindings imperatively. An example use case: var el2 = new MyElement(); el2.myProp = this.$.anotherElement.anotherProp That won't setup a binding, it just assigns the value or object. I'd like to find a way to do something like: el2.myProp.bindTo(this.$.anotherElement.anotherProp) Possible?...

Polymer iron-form not working


polymer,polymer-1.0
I have the following markup in my html: <form is="iron-form" login-form> <paper-input label="Email" type="email" name="email"></paper-input> <paper-input label="Password" type="password" name="password"></paper-input> <paper-button class="self-end btn-primary" raised login-btn>Login</paper-button> </form> In chrome, the form is never upgraded to an iron-form, but it works fine in firefox. However, I can use: document.createElement('form', 'iron-form'); to create an...

Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key


event-handling,polymer,web-component
I have a paper-input-container next to a paper-icon-button and want to trigger the same function that is wired to the paper-icon-button's on-tap handler when a user hit's enter while the input has focus... anyone know how to do this. <html> <head> </head> <body> <dom-module id="example-stuff" > <style> :host { display:...

polymer databinding performence


polymer,btle
I am trying to make an app that reads data from a device over btle and displays this data in a streaming graph. I want to do this with use of polymer. It would be nice to shield the complexity of btle. To have a html tag for btle that...

polymer 1.0 data binding not working as expected


javascript,php,arrays,json,polymer
I'm trying to bind some data in a custom element but to no avail. I have a system-menu.html that has my custom element: system-menu.html <link rel="import" href="../../bower_components/polymer/polymer.html"> <link rel="import" href="../../bower_components/iron-menu-behavior/iron-menubar-behavior.html"> <dom-module id="system-menu"> <template> <template is="dom-repeat" items="{{data}}"> <li>{{item.name}}</li> </template> </template> </dom-module> <script> (function() {...

Polymer 1.0 data binding not working


data,binding,polymer
I have the following polymer element: The value of navigator.currentStep is not updating after someMethod is called. <dom-module id="m"> <template> Navigator step = <span>{{navigator.currentStep}}</span> </template> </dom-module> Polymer({ is: 'm', ready: function() { this.navigator = new Navigator(1); console.log(this.navigator.currentStep); // 1 }, someMethod: function() { this.navigator.next(); console.log(this.navigator.currentStep); // 2 } }); Output...

Dropshadow from paper-toolbar overlays paper-dialog


css,polymer,polymer-1.0
I have basic drawer app with a dialog box. When the dialog box opens the dropshadow from the toolbar(I assume) is bleeding over the box. Is there a fix for this? <paper-drawer-panel> <paper-header-panel drawer> </... <paper-header-panel main> <paper-toolbar> <paper-dialog>...</paper-dialog> </paper-toolbar> </paper-header-panel> </paper-drawer-panel> Some things I have tried includes moving the...

Polymer dom-repeat and displaying result of iron-ajax call


javascript,json,polymer
I have a feed of GP Practice addresses the start of which is as follows (not the whole feed which is over 16000 entries - still got to figure out paging) [{"Address1":"73 UPPER WICKHAM LANE","Address2":"WELLING","Address3":"KENT","Address4":"","Address5":"","CloseDate":"\/Date(-62135596800000+0000)\/","ContactName":"","ContactTelephone":"020 88541910","EmailAddress":"","LastUpdatedDate":"\/Date(1434749040000+0100)\/","Name":"(GPSI) DR AC...

Icon list for Polymer


html,polymer
The polymer starter kit makes references to <iron-icon> to implement icons. For example: <iron-icon icon="home"></iron-icon> I've checked the iron-icons section on the Polymer Catalog website, but the demo which should show all the icons is which is missing. Is there any other reference of all the icons in the <iron-icon>...

Using dom-if for conditionals in arrays


polymer,polymer-1.0
In 0.5 I could use the expressions in the dom-if to select for certain things in arrays while looping through them. How could I achieve the same effect in 1.0?

Dynamically adding and removing Event listeners


javascript,polymer,polymer-1.0
I added a tap listener to a div in a custom element using var nicediv = document.getElementById('nicediv'); nicediv.addEventListener('tap',this.listenerfunc.bind(this),false); This is successful but I am unable to remove the event listener. This didn't work. nicediv.removeEventListener('tap',this.listenerfunc); Any thoughts?...