polymer | 易学教程

Transpiling a Polymer Element

阅读更多关于 Transpiling a Polymer Element

问题 I'm scaffolding Polymer 1.x Elements using $ polymer init . These elements are not Polymer applications . They are just elements. All my elements are coded in ES6. I'd like to transpile my elements down to ES5. Considering that $ polymer build does not support single Element projects, what solutions can I use to achieve the above? 回答1: Transpiling Polymer to es5 is done in 3 steps: Vulcanize your element(s) by inlining the script and CSS: vulcanize element.html --inline-script --inline-css >

Polymer: Changes not always flowing through a filter

阅读更多关于 Polymer: Changes not always flowing through a filter

问题 I've got an array that I'd like to display the top N elements from. This array is mutated and kept sorted by another component in my app. I'm seeing a bug though such that if I display all of the array elements everything is fine. If I respond to my array changing by taking a copy of the array with .slice() and putting that in another field and displaying that field filtered for the top N elements, then everything if fine. But if I just display the original array filtered through for the top

Allow cross origin - iron-ajax - Polymer

阅读更多关于 Allow cross origin - iron-ajax - Polymer

问题 XMLHttpRequest cannot load http://abcd.com/xyz?id=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. I'm setting <iron-ajax id="requestRepos" headers='{"Accept": "*/*"}' url="http://abcd.com/xyz" params="{{requestParams}}" handle-as="json" on-response="handleResponse"></iron-ajax> I tried the above using CORS extension in chrome, and it worked. But without it, it doesn't work. Below is the start

Does Polymer support lower android versions?

阅读更多关于 Does Polymer support lower android versions?

问题 Can any one please let me know whether Polymer supports Android lower versions i.e. from 2.2 I have read that Polymer supports from Android version 4.4.3. I have a website which is designed using Polymer and I want to use this URL in Android Webview. Thanks. 回答1: Polymer's poylfills are only "guaranteed" to work on Chrome for Android 4.4.3 and above. This means no support for the older webview. To gain support in the legacy webview, many have been successful with Crosswalk. 来源： https:/

How do I use flexbox together with Polymer to make tables

阅读更多关于 How do I use flexbox together with Polymer to make tables

问题 I would like to use flexbox in Polymer to create tables out of divs. But the main problem is that by "cells" squish because of the content inside it when I change the size of the puter div. In the example below, try resizing the browser window. How do I get it to obey the size defined by flex as first priority while still wrapping text? <!doctype html> <html> <head> <script src='../bower_components/webcomponentsjs/webcomponents-lite.js'></script> <link rel='import' href='../bower_components

app-localize-behavior and nested template

阅读更多关于 app-localize-behavior and nested template

问题 How can I manage to use a behavior (Polymer.AppLocalizeBehavior) inside a nested template: the created scope hides the localize() function. <template> ... <div class="content"> <div class="card-container"> {{localize('greeting')}} <---- OK! <div class="layout horizontal wrap"> <template is="dom-repeat" items="{{employees}}"> <paper-card> <div class="card-content"> <h2>{{localize('greeting')}}</h2> <---- EMPTY.... Example appreciated. Thanks --nick EDIT 2016 May, 05 A small project showing the

How do you create an observable derivative property in Dart / Polymer Dart?

阅读更多关于 How do you create an observable derivative property in Dart / Polymer Dart?

问题 I have a component that I want to bind a different css class to based on a boolean value. I have the following in my component code: bindCssClass(div, "open", this, "task.isOpen"); bindCssClass(div, "closed", this, 'task.isClosed'); Where isOpen / isClosed are defined as the following: @observable bool isOpen = true; get isClosed => !isOpen; The question is, how can I get isClosed to be observable, but based on changes to isOpen? I'd like to know this case, but also for cases that are more

during wct test: Failed to load resource: the server responded with a status of 404 (Not Found)

阅读更多关于 during wct test: Failed to load resource: the server responded with a status of 404 (Not Found)

问题 I am struggling to find someway approach to test my vanilla webcomponents. I found someone trying the same and I try to reproduce exactly his steps and the answer accepted (Web Component / HtmlElement : unit testing). I can't imagine a reason for not finding the test. It seems it looks in wrong place. If so, maybe the answer to my question will be how to edit the path to in wct.conf.js to find the real test (I am not sure it is the root cause but it is my best in front of the error provided).

Which event fires when i click outside paper-dialog?

阅读更多关于 Which event fires when i click outside paper-dialog?

问题 I want to catch dismiss event of paper-dialog box. Is there any event which fires on tab out / outside dialog box? 回答1: You can try core-overlay-close-completed . Please see this jsbin. 回答2: As of the Polymer 1.0 release, you can do the following: <paper-dialog id="loginDialog"> ... </paper-dialog> var dialog = document.getElementById('loginDialog'); dialog.addEventListener('iron-overlay-closed', function (customEvent) { var id = customEvent.currentTarget.id; console.log(id + " is closed!");

How to find out what element is going to be extended, while registering my own in Polymer

阅读更多关于 How to find out what element is going to be extended, while registering my own in Polymer

问题 I recently asked How to extend multiple elements with Polymer and it turned out, in fact, you can't really. The idea was to create a web component that can be applied to different elements to "decorate" them. Addy Osmani answered this question with a few approaches to handle that use case. One of them was: The alternative (if you strictly want to do this all in one custom element, which imo, makes this less clean) is to do something like checking against the type of element being extended,