polymer-1.0

问题 I have a custom element and would like to detect clicks outside of it. For example <dom-module id="simple-element"> <style> </style> <template> <content></content> </template> </dom-module> <script> (function() { Polymer({ is: 'simple-element', listeners: { 'tap': 'regularTap' }, regularTap: function() { console.log("i was tapped"); } }); })(); </script> Is there an event where I can listen to which will tell me when user has clicked outside of the element? Thanks. 回答1: Something along these

问题 Google's Polymer creators claim we can manually sort <iron-list> (resolving this issue, perhaps?). Also see this issue. Per @emmanuel on the Polymer Slack Site: You can set list.items = newItems and that will refresh the list. Here is my code. But it's not working. Please help. This section of code seems to be the problem. //this.$.list.items = this.items.sort(this._computeSort(val, ord)); //this.items = this.items.sort(this._computeSort(val, ord)); //this.items.sort(this._computeSort(val,

问题 I'm looking for a tried and true way of handling asynchronous calls to API endpoints returning JSON (using polymer's latest rendition of the iron-ajax element). These API calls rely on etag matching, so it is important that the etag sent matches the one on the server. I have that part working, except in certain circumstances, where quick succession API calls may cause an out-of-sequence response (and therefore can get the etag out of sync). There are also multiple API endpoints (i.e.

问题 I am trying to change the color of an element when a button is pressed. I want a paper ripple effect to be triggered in that element when the button is pressed and the color changes. How am I supposed to do that? Target element: <paper-toolbar class="abc"> <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> <div flex class="indent title">Heading</div> </paper-toolbar> Trigger element: <paper-button class="def background-blue"></paper-button> <paper-button class="def

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

问题 Question: In this Plunk, I want to import the Polymer 1.0 elements <paper-button> and <paper-menu> . How do I do that? In other words, what is the proper set of <script> and <link> tags and their respective src and href attributes that will allow my <paper-button> and <paper-menu> elements to properly function? Attempts: In the right margin, there is an option to search and import external libraries. I used that to search for Polymer 1.0 and I imported the following. <script data-require=

问题 I am looking to sort data in an iron-list (and also sort items as they are added into the data array). Sample (unsorted) json data: [ {"name": "Zebra"}, {"name": "Alligator"}, {"name": "Lion"} ] I have tried using the indexAs property to sort an iron-list as follows but the API isn't clear how to use it: <iron-ajax url="./data.json" last-response="{{data}}" auto></iron-ajax> <iron-list items="[[data]]" as="item" index-as="name" class="fit"> <template> <div> Name: <span>[[item.name]]</span> <

问题 I am triying to learn how to use the new app-toolbox. In local, works fine; but when I use: polymer build I get these errors: C:\Users\Marcos\Documents\poly2>polymer build info: Building application... info: Generating build/unbundled... info: Generating build/bundled... error: Uncaught exception: Error: file path is not in root: C:/Users/Marcos/Documents/poly2/index.html (C:\Users\Marcos\Documents\poly2) error: Error: file path is not in root: C:/Users/Marcos/Documents/poly2/index.html (C:

问题 This question already has answers here : Stretch image in iron-image element (4 answers) Closed 4 years ago . Check out this jsbin I want my images have auto height with sizing="contain" , it means they won't have extra space. In my example those extra space are in red. iron image is required to set a fixed height otherwise image not display, I tried height:auto and height:100% but not work. 回答1: I was using paper-material, should use paper-card 来源： https://stackoverflow.com/questions

问题 I've been toying with Polymer 1.0 a bit and have this basic HTML file: <head> <link rel="import" href="bower_components/polymer/polymer.html"/> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> </script> </head> <body> <dom-module id="photo-view"> <template> <p>Photo <span>{{basePic}}</span> goes here with filters [<span>{{filters}}</span>]</p> </template> <script> var PhotoView = Polymer({ is: 'photo-view', properties: { basePic: String, filters: { type: Array, value: