polymer | 易学教程

Passing data to a Polymer element

阅读更多关于 Passing data to a Polymer element

问题 When working with Web UI I could pass data to a component like this: <my-element" name="{{someName}}"></my-element> How do I pass data to a Polymer element? 回答1: You can pass data to a Polymer element, but there is a little bit more detail involved. Imagine the element with a single field, name : // In element.dart. import 'package:polymer/polymer.dart'; @CustomTag("my-element") class MyElement extends PolymerElement with ObservableMixin { @observable String name; } And here is the

Polymer serve and service worker

阅读更多关于 Polymer serve and service worker

问题 I am trying to get started on debugging my Polymer application. I have hand crafted it by copying what I think the PolymerCLI Polymer init does. I am not sure what is loading service worker. The default one for development just does a console.info() call saying its been disabled for development. When I use Polymer serve to serve my application on localhost: 8080, I get the console.info message, despite there being nowhere where I actually load the file service-worker.js . Because the

Minimal working Polymer example

阅读更多关于 Minimal working Polymer example

问题 I've been trying to get an extremely minimal web page using Polymer to simply render in the browser - I'm using a Node/ExpressJS/Jade setup on the server-side of things. My code is as close as it gets to the examples that ship with the Polymer documentation, I think I'm missing something really simple. I'm using Chrome M35. On the server, I have installed all the Polymer stuff (platform, core and paper) using bower and I've mapped bower_components to be served statically under /static app.use

PolymerJS: Iron-Ajax - How to Bind Token to Headers Property?

阅读更多关于 PolymerJS: Iron-Ajax - How to Bind Token to Headers Property?

I have a polymer-element and I want to apply a token as headers attribute. When I push the button an XMLHttpReqeust is send. The responsible iron-ajax element has a headers property with a string. I would like to change the string, and apply a different attribute. I've been told that normal compound bindings does not work and I should try computed bindings or just computed properties . But the problem seems to be the question, how to bind these computed properties or computed bindings to the iron-ajax element? Whenever I use curly braces, nothing gets evaluated. And if I leave them out, only

How to pass parameters in Polymer 2.0 on-tap function?

阅读更多关于 How to pass parameters in Polymer 2.0 on-tap function?

问题 I'm using Polymer 2.0 and I have a dom-repeat for different to-do cards. What I want to do is remove the card when I click on it. So I tried this on-tap=deleteNote([[index]]) which uses the index from the dom-repeat . However Polymer doesn't execute the function. What am I doing wrong? 回答1: Another solution could be the dataset object within the event.target . You can define your properties with the data- prefix: <div on-tap="doSomething" data-item$="[[item]]"></div> And within your

Handling polymer elements with different heights inside <core-pages>

阅读更多关于 Handling polymer elements with different heights inside

I have a <core-drawer-panel> and inside it is a <core-pages> element inside <core-header-panel main> . <core-pages> contains a set of custom elements that I have defined and only one of those elements are shown at any point of time. However the problem is, there are elements that take only part of the screen but still scroll vertically. The amount of scrolling is equal to the tallest element within <core-pages> . The expected behavior is that the element should scroll only if it exceeds it's view port. How can I achieve this behavior? demo-students.html (Stripped down version, to make it more

Dynamically inject shared styles in polymer element (polymer 1.2.3)

阅读更多关于 Dynamically inject shared styles in polymer element (polymer 1.2.3)

I do have several nested polymer elements created by myself. Currently with using polymers shared styles I'm able to inject custom styling into other elements. Unfortunately this approach is restricted to static use. So at implementation time I do need to know which Element should use which shared style by import the shared style module with <link rel="import" href="my-shared-style.html"> and <style include="my-shared-style"></style> . But in my use case I do need to inject shared styles into polymer elements at runtime. Is there any possibility to achieve this? UPDATE I tried following

Numeric for loop in Dart Polymer templates

阅读更多关于 Numeric for loop in Dart Polymer templates

How do I write a numeric for loop in a polymer custom element template? I mean something like <template repeat="{{for i = 1 to 10}}"> <div>item</td> </template> Is it possible in the current version of Dart 1.0? Currently no, this is not possible in Polymer.dart (or Polymer.js to my knowledge). The repeat binding requires an iterable (See Repeating Templates section of the Polymer_expressions library). Unfortunately due to Issue 12669 it is also not possible to use a list literal to accomplish this either. Using a filter we can accomplish this:  <polymer-element name="my

How to pass object literals as polymer attributes

阅读更多关于 How to pass object literals as polymer attributes

问题 In order to test some polymer custom elements of mine in isolation, I would like to be able to pass in js object literals for some attributes that would ordinarily come from parent elements. I'm having trouble figuring out how to do this. See this example code. If it were working as I would like it to, it would display a 1 and a 2 next to each other, but it doesn't work. <script src="http://www.polymer-project.org/webcomponents.js"></script> <link rel="import" href="http://www.polymer-project

clone of polymer element remove template of polymer element

阅读更多关于 clone of polymer element remove template of polymer element

问题 my polymer element: <ele-label id="newLabel" color="#000000" bgColor="#f1f1f1" eleHeight="30" eleWidth="50" text="Name:" eleDisplay="inline-block" elefloat="left"></ele-label> but when I clone this element inner html will removed. can any one help me ? <polymer-element name="ele-label" attributes="text color eleid eleWidth eleHeight fontSize bgColor paddingTop paddingBottom paddingLeft paddingRight eleDisplay elefloat" > <template> <div><label style="font-size:{{fontSize}}pt; color:{{color}}