polymer | 易学教程

Element transclusion

阅读更多关于 Element transclusion

Is there something like angularjs directive's transclude attribute in polymer? Something what allows me to include some elements to a specific place in template? I would like to achieve something like following: <my-header title="My title"> <my-header-item name="Item 1"></my-header-item> <my-header-item name="Item 2"></my-header-item> </my-header> which might be expressed: <h1>My title</h1>  <ul> <li>Item 1  <li>Item 2 </ul> I am not sure if this is a task for polymer or if this is a typical way to use

Typescript with Polymer 1.0?

阅读更多关于 Typescript with Polymer 1.0?

问题 I found this great article I had been using with Polymer 0.5 ( http://www.mikecann.co.uk/programming/tinkering-with-google-polymer-and-typescript/ ) for being able to use Typescript Classes for Polymer Elements. This approach no longer works with Polymer 1.0 . I tried class CreatorStudio extends Polymer.Class({}) { is = "creator-studio"; } /*(function () { Polymer(CreatorStudio.prototype); })();*/ document.registerElement("creator-studio", CreatorStudio.prototype); And a number of other

Templating in Polymer: How to load components into a specific layout

阅读更多关于 Templating in Polymer: How to load components into a specific layout

I am coming from a PHP/Laravel direction and there we use the blade templating engine to load components into a specific layout like this: Main Layout called: layout.blade.php <html> <head><title>Whatever</title></head> <body> @yield('content') </body> And then we load our components inside this layout by a file like this, called: content.php @extends(layout) @section('content') <h1>This contents is loaded into the Layout</h1> <p>Yada yada yada</p> @stop In the backend we link the route (lets call it "/content") to a controller that creates this view. And anytime we click on a menu-item with

polymer 3.0 uncaught reference error on paper drop-down click

阅读更多关于 polymer 3.0 uncaught reference error on paper drop-down click

after importing these: import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js'; import '@polymer/paper-listbox/paper-listbox.js'; import '@polymer/paper-item/paper-item.js'; The dropdown does not produce an error when left alone but when clicked on (will repeat on multiple clicks) it will produce it. Uncaught ReferenceError: KeyframeEffect is not defined at HTMLElement.configure (fade-in-animation.js:32) at HTMLElement._configureAnimations (neon-animation-runner-behavior.js:42) at HTMLElement.playAnimation (neon-animation-runner-behavior.js:122) at HTMLElement._renderOpened (iron-dropdown

How can I refresh/reload Polymer element, when page changes?

阅读更多关于 How can I refresh/reload Polymer element, when page changes?

I created few custom elements. When they get ready(triggered by ready() ), they start downloading JSON data from API, and show to the users. Want to use them in Single Page Application, and to download data when it becomes visible. Right now, it downloads all the data of all the pages first, because I used ready() event. Is it possible to fire an event every time they become visible? I found a solution. But, it's a little bit tricky. First, I added a function called isEqual . app.isEqual = function(x, y) { return x === y; }; And, used dom-if . <section data-route="groups"> <template is="dom-if

ContentEditable in Shadow DOM?

阅读更多关于 ContentEditable in Shadow DOM?

I'm trying to create a Polymer element for contenteditable. I create a contenteditable div, place this.innerHTML there, and it becomes editable. All good with polyfills, e.g. in Firefox. But it doesn't work in Chrome 35 with native Shadow DOM. Well, it is still editable, but neither document.execCommand nor window.getSelection is working. document.execCommand does nothing. window.getSelection().getRangeAt(0).toString() is defined but empty. No error is shown. So I cannot style the selection. Does anybody know whether it's possible to make a custom editable element or not? What am I doing wrong

Polymer Template Repeat Over Multiple Charts

阅读更多关于 Polymer Template Repeat Over Multiple Charts

I have a polymer highcharts element that works: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="bower_components/platform/platform.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"> <polymer-element name="bar-chart" attributes="source"> <template> <div id="container" style="max-width: 600px; height: 360px;"></div> </template> <script> Polymer("bar-chart", { ready: function() { var options = { chart: {type: 'bar', renderTo: this.$.container}, title:

How do you write end-to-end tests for Polymer (JS) based application (circa May 2015)?

阅读更多关于 How do you write end-to-end tests for Polymer (JS) based application (circa May 2015)?

I have built a Polymer based application. I'd like to write some end-to-end tests (not unit tests, but user behavior integration tests) for it. How do I do this currently (May 2015)? I spent the past few days looking into this problem. Despite the vast number of pages devoted to one related topic or another on the web, nothing documents a solution to this problem. I was able to piece together something that works. So here it is. Hope this is useful for those looking to write end-to-end tests for Polymer apps. I am sure a better solution will come about as Polymer, web components, and shadow

Hero Animation in polymer 1.0

阅读更多关于 Hero Animation in polymer 1.0

I am trying to implement hero animation(from neon-elements) to animate to another custom element(element1.html to element2.html) by clicking a red square. I wrote everything that is documented here: https://github.com/PolymerElements/neon-animation#shared-element But nothing happens on click. Please guide me on implementing this. Here are my files: index.html <!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> </script> <link rel="import" href="bower_components/neon-animation/neon-animated-pages.html"> <link rel="import" href="bower

How to use Polymer (1.0) with Rails (4)?

阅读更多关于 How to use Polymer (1.0) with Rails (4)?

问题 Now that Polymer (1.0) is "Production Ready" Which is the best way to use it on Rails (4) ? I read a lot and I saw that all the solutions are deprecated, (For example using Gems like: likepolymer-rails, emcee , etc) I'm lost trying to create a good structure for the project, and the way to include all the polymer components, also I don't know if Sprocket could help or not. 回答1: UPDATE (16 June 2015) : An official package has been released for polymer-rails . Please see polymer-elements-rails,