polymer-1.0 | 易学教程

How to add custom validator to paper-input?

阅读更多关于 How to add custom validator to paper-input?

问题 Need to add a custom validator which does some complex validation based on the values of other fields in the html. Tried adding custom validator function as an attribute to the paper-input element but it wont get called at all. <dom-module id='custom-ele'> <paper-input is="iron-input" id='input_1' label='Label_1' validator='validate_1'></paper-input> <paper-input is="iron-input" id='input_2' label='Label_2' validator='validate_2'></paper-input> ... </dom-module> <script> Polymer({ is: 'custom

Polymer 1.0 Global Variables

阅读更多关于 Polymer 1.0 Global Variables

In Polymer 0.5 the advice on globals was as outlined in this question/answer: Polymer global variables However in Polymer 1.0 this doesn't seem to work. Change notifications are not automatically generated on the underlying model, they are generated on the <dom-module> instead which means that change notifications will be generated on only one of the <app-globals> . What is the recommended way of implementing this pattern in Polymer 1.0? Polymer element <iron-meta> is also an option. For me this was the easiest solution. I've extended Etherealones' solution to work as a Behavior, and to extend

Bind angular 2 model to polymer dropdown

阅读更多关于 Bind angular 2 model to polymer dropdown

问题 I decided to take some time this weekend to look at Angular 2 and Polymer. I'm really interested in angular 2 and would really like to start building something with it. One downside with starting with Angular 2 now is that there is no good component library yet. However, since Angular 2 claims that it should work so good together with Web Components I thought of giving Polymer a try. I have succeeded to bind data to simple components like an input field. What I'm stuck at for the moment is

Polymer Dom-Repeat Binding to Content

阅读更多关于 Polymer Dom-Repeat Binding to Content

问题 In polymer 1.2.3, Is it possible for a dom-repeat to use content as a template and bind values to the elements provided? Custom Element: <dom-module id="modify-collection"> <template> <div> <template is="dom-repeat" items="[[collection]]"> <content></content> </template> </div> </template> </dom-module> Usage: <modify-collection collection="{{things}}"> <list-item resource="[[item]]"></list-item> </modify-collection> I've looked at the following resources without help: Polymer: How to watch

Polymer 1.0: How to pass an argument to a Polymer function from an attribute?

阅读更多关于 Polymer 1.0: How to pass an argument to a Polymer function from an attribute?

Is there a way to pass an argument to a Polymer function from an element attribute inside its <template> ? <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" /> <dom-module id="example-element"> <template> ... <paper-button id="foo" on-tap="bar">Click</paper-button> ... </template> </dom-module> <script> (function() { Polymer({ is: 'example-element', properties: {...}, bar: function(arg){ // Do stuff using argument arg } }); })();

Polymer 1.x: Modal paper-dialog appears behind its backdrop

阅读更多关于 Polymer 1.x: Modal paper-dialog appears behind its backdrop

问题 Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop? So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable> ). I also tried a "hack-fix" (suggested by someone) involving setting z-index: auto in the css of paper-header-panel . Neither works. It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute. Any ideas? Similar issues Appearing around the internet are this issue

Polymer 1.0 - Binding css classes

阅读更多关于 Polymer 1.0 - Binding css classes

问题 I'm trying to include classes based on parameters of a json, so if I have the property color, the $= makes the trick to pass it as a class attribute (based on the polymer documentation) <div class$="{{color}}"></div> The problem is when I'm trying to add that class along an existing set of classes, for instance: <div class$="avatar {{color}}"></div> In that case $= doesn't do the trick. Is any way to accomplish this or each time that I add a class conditionally I have to include the rest of

Polymer 1.0 Global Variables

阅读更多关于 Polymer 1.0 Global Variables

问题 In Polymer 0.5 the advice on globals was as outlined in this question/answer: Polymer global variables However in Polymer 1.0 this doesn't seem to work. Change notifications are not automatically generated on the underlying model, they are generated on the <dom-module> instead which means that change notifications will be generated on only one of the <app-globals> . What is the recommended way of implementing this pattern in Polymer 1.0? 回答1: Polymer element <iron-meta> is also an option. For

Polymer 1.0: How to pass an argument to a Polymer function from an attribute?

阅读更多关于 Polymer 1.0: How to pass an argument to a Polymer function from an attribute?

问题 Is there a way to pass an argument to a Polymer function from an element attribute inside its <template> ? <script src=\"http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js\"></script> <link rel=\"import\" href=\"http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html\" /> <dom-module id=\"example-element\"> <template> ... <paper-button id=\"foo\" on-tap=\"bar\">Click</paper-button> ... </template> </dom-module> <script> (function() {