polymer-1.0 | 易学教程

How to access functions defined in js file inside the template of Polymer element?

阅读更多关于 How to access functions defined in js file inside the template of Polymer element?

问题 I have created a function in global.function.js file as function getData(flag) { if (flag === 1) { return "one"; } else { return "not one"; } } which then is imported using custom-js-import.html element: <script src="global.function.js"></script> When I tried to access the above function in custom-element.html , I am able to access it in the script part but not in the template part. Is there any way I can access the function inside the HTML element?  <link rel=

Polymer paper-header-panel won't render properly

阅读更多关于 Polymer paper-header-panel won't render properly

问题 I posted kinda similar problem here in StackOverFlow regarding paper-header-panel of Polymer it was answered but the solution isn't efficient or right way of doing it, you can look it here. Specific import should be made not the generic one as mentioned here. My code for rendering it properly is the following: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href

Updating a polymer element property with data from API call

阅读更多关于 Updating a polymer element property with data from API call

问题 I'm trying to update a property in a polymer element with data from an ajax api call. I have something similar working elsewhere in the app where users are able to add packages dynamically. Anyone know what I'm doing wrong here? <link rel="import" href="../bower_components/polymer/polymer.html"> <link rel="import" href="address-input.html"> <link rel="import" href="package-list.html"> <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> <dom-module id="step-one"> <style> <

Combining polymer 1.0 with 3.0

阅读更多关于 Combining polymer 1.0 with 3.0

问题 I am working on modifying an existing project which is built in polymer 1.0. As the current version of polymer is polymer 3.0 how can we include the same without making much changes with the existing application. The main difference than i found out is that in polymer 1.0 .html files are imported whereas in polymer 3.0 .js files are imported. Added below the comparison between two imports polymer 1 <head> <link rel="import" href="../../bower_components/polymer/polymer-element.html"> </head>

Polymer 1.0 Is there any ready made chart element?

阅读更多关于 Polymer 1.0 Is there any ready made chart element?

问题 I want to add a pie chart in my Polymer 1.0 application. I used chart-elements with Polymer 0.5, but when migrated to 1.0 it stopped working! I did not find anything for 1.0 yet. Does 1.0 at all has a ready made chart element? Seeking for expert help. Thanks in advance. EDIT According to Ben's suggestion I tried with google-chart component and this is what I did. But the chart is not rendering. Step 1: I installed google-chart by using bower install --save GoogleWebComponents/google-chart

Position app-drawer underneath app-header

阅读更多关于 Position app-drawer underneath app-header

问题 Using the template from starter kit 2, is it possible to have the app drawer below the app-header ? Right now the app drawer starts from the top of viewport and is columnized next to app-header . I would like my app to be like google keep and google cloud console where the app header spans the entire width of the viewport and the app drawer begins underneath. After reading the element catalog for app-layout , I did not see a offical api/attribute to set this. I've tried a few things but no

How to get query string in Polymer

阅读更多关于 How to get query string in Polymer

问题 Is there anyway how can I get query string in Polymer? http://localhost:8080/search?param=ppshein I want to get search?param=ppshein or param=ppshein in Polymer. I've tried to get query string in app-route but it display nothing. <app-route route="[[route]]" pattern="/:id" data="{{routeData}}"></app-route> [[routeData.id]] ** 回答1: You could use <app-location>.queryParams: <app-location route="{{route}}" query-params="{{queryParams}}"></app-location> queryParams is an object containing key

Polymer 1.0: iron-pages not switching pages with children events

阅读更多关于 Polymer 1.0: iron-pages not switching pages with children events

问题 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

Polymer 1.0: How to design a modern authentication UX in Polymer if modals must go outside <paper-drawer-panel>?

阅读更多关于 Polymer 1.0: How to design a modern authentication UX in Polymer if modals must go outside ?

问题 Our Challenges: It seems to me The Polymer 1.0 developer community faces the following challenges right now: We have no user auth UX example to follow. This Stackoverflow question requests a user authentication UX example. And describes why it's needed. This Github issue also documents multiple user requests for such a user auth UX example. And there has also been lots of anecdotal chatter on the Polymer Slack Site about this issue as well. Modals don't currently work inside <paper-drawer

Dynamically created html import inside a polymer element (Version 1.0)

阅读更多关于 Dynamically created html import inside a polymer element (Version 1.0)

问题 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?  <dom-module id="my-component">  <template> <div id="container"> <!