polymer

问题 I have created a custom Polymer 2.0 based web component which aims to be installed on third-party websites in order to display content managed from my website. The web component in question depends on 3 other custom web components but also on iron-ajax , iron-dropdown , iron-icon , iron-icon-svg , marked-element and paper-icon-button . In order to maximize browsers compatibility, the code is transpiled to ES5 by using polymer-build with the default es5-bundled preset. Once done, the build

问题 I've got a Polymer app running an iron-ajax call to a service that returns a json string: { "name": "John" } The Polymer code on the main page is: <link rel="import" href="/elements/my-form.html"> <dom-module id="my-app"> <template> ... <iron-ajax auto url="/grabData" handle-as="json" last-response="{{data}}"></iron-ajax> <iron-label> From iron-ajax = {{data.name}} </iron-label> <my-form></my-form> ... "my-form" is: <link rel="import" href="/my-name.html"> <dom-module id="my-form"> <template>

问题 I'm getting into Polymer and i like the deps resolution approach using imports. And i like the extending capability through the behaviors config. However, there's something that doesn't feel comfortable to me, about behaviors in particular. Looking at the PolymerElements code i see that behaviors, are defined inside their own html in the global object Polymer and then referenced directly when imported by another component.. For example: paper-button imports paper-button-behavior https:/

问题 I am using polymer starter kit which uses page.js for routing. The hashbang page option is set to true in routing.html // add #! before urls page({ hashbang: true }); when links such as <a href="/products/productname"></a> are clicked, the #! is added and the resulting url looks like this: http://localhost:3000/#!/products/productname but when the links are opened in a new browser tab, they look like this http://localhost:3000/products/productname . How can I have the #! added when links are

问题 This may be a more general purpose question than how I stated it, but I wanted to be specific as possible. I'm not sure how to use jsFiddle with Polymer, with all of the imports, but I hope some code samples will suffice. I have a core-menu that looks like this: <core-menu> <core-submenu label="First submenu"> <core-item label="Test submenu item 1"> <core-item label="Test submenu item 2"> <core-item label="Test submenu item 3"> <core-item label="Test submenu item 4"> </core-submenu> <core

问题 following scenario: I have a Firebase database containing a list that is used to create a set of "paper-cards" with dom-repeat : <template is="dom-repeat" items="{{items}}"> <my-element card="{{item}}"> <paper-card id="{{card.id}}"> ... </paper-card> </my-element> </template> In the UI, the user can add or delete paper-cards, so items also get deleted in Firebase. Now I realized if I change the CSS of an element (e.g. fadeIn, fadeOut animation) and afterwards delete a card and later add one

问题 I wanted to ask if it is possible to bind data to the element and access it later inside the actual content. Here is an example: I want to create a list component, however let the user define how to render every entry. Here is my current code: List Element: <template repeat="{{item in items}}"> <content></content> </template> User using it: <ak-list items="{{items}}"> {{item.name}} </ak-list> However, this does not work 回答1: I suppose - you won't get access to data model from inside HTML

问题 I am trying to select an element in the shadow DOM. As I understand, there are 2 options: /deep/ or ::shadow I have setup a jsfiddle to illustrate my tests: http://jsfiddle.net/chevdor/ph2qo5s8/4/ I am testing with and element and I try selecting on of its div as example. I know I could use -webkit to access those but this is not what I need. I don´t succeed on getting the elements under the shadow-root, neither using /deep/ not using ::shadow I am using Chrome. Does anyone know where the

问题 I am trying to select an element in the shadow DOM. As I understand, there are 2 options: /deep/ or ::shadow I have setup a jsfiddle to illustrate my tests: http://jsfiddle.net/chevdor/ph2qo5s8/4/ I am testing with and element and I try selecting on of its div as example. I know I could use -webkit to access those but this is not what I need. I don´t succeed on getting the elements under the shadow-root, neither using /deep/ not using ::shadow I am using Chrome. Does anyone know where the

问题 I'm trying to hide/unhide a UI element with a button in Polymer, but it doesn't work. I have the button and the element: <button id="runPredictionButton"> <i>Button text</i> </button> <px-card hidden$="{{hide}}"> //...content here </px-card> <div class="output"></div> And I defined the property and the event listener, too: <script> Polymer({ is: 'custom-view', properties: { hide: { type: Boolean, value: false }, }, ready: function() { var self = this; this.$.runPredictionButton