polymer-1.0

问题 In version 0.5 it was easy: <polymer-element name="textarea-tpl" attributes="value placeholder"> <template> <link rel="stylesheet" type="text/css" href="css/index.css"> <textarea id="textarea" value="{{value}}" placeholder="{{placeholder}}"></textarea> <textarea id="hidden_textarea"></textarea> </template> <script> Polymer({ ready: function() { var text = this.$.textarea; var hidden_text = this.$.hidden_textarea; text.onkeyup = function() { hidden_text.value = text.value + "\n"; var height =

问题 The Polymer 1.0 documentation states: The path syntax doesn’t support array-style accessors (such as users[0].name). However, you can include indexes directly in the path (users.0.name). How would one get around this in setting the path dynamically, and obtain the same behavior as the following example using Polymer 0.5? This is specifically in the context of generating forms for a model defined by an Object. <template repeat="{{row in fieldset.rows}}"> <div layout horizontal flex> <template

问题 How do you make dom-if templates within dom-repeat 's update when the data changes?? Example here http://jsbin.com/xatala/edit?html,output In the example the data changes after 1.5 seconds but the dom-if's inside the template aren't re-evaluated/rendered. You can see this in the console.log. The data has changed but the view isn't updated. How would you make this work and what is the reasoning behind it?! 回答1: Here is example that works: http://jsbin.com/nejadibuju/edit?html,console,output

问题 Using Polymer, does anyone know how to bind a value between a parent and a child element? Below is my attempt however it doesn't work. Note: child-component needs to be created using JavaScript. <dom-module id="host-component"> <template> <div>{{sharedValue}}</div> <div id="childComponentContainer"> <!-- CHILD-COMPONENT GETS CREATED HERE --> </div> </template> <script> Polymer({is:'host-component', properties:{ sharedValue:{ type: String, notify:true, observer: 'sharedValueChanged' } },

问题 Ok so far I was successfully able to bind <paper-radio> , <paper-checkbox> with ngModel by using a Custom ControlValueAccessor for each one of them. Now I'm stuck at <paper-dropdown-menu> Here the scenario, I can capture the paper-dropdown (iron-select) but cannot bind -two-way, i.e., using ngModel below is the HTML and custom accessor class My form.html <paper-dropdown-menu [(ngModel)]="mymodel.selection" label="Your Fix"> <paper-menu class="dropdown-content"> <paper-item value="1"

问题 In my polymer app, when I open a paper-dialog using an iPhone, it's not centered, as opposed to opening it using Chrome or Safari using the a desktop Mac or PC. I'm dynamically constructing the paper-dialog element and placing it in the DOM template using javascript, and then calling open() : var d = document.createElement('paper-dialog'); d.innerHTML = "<h2>Dialog Title</h2>" "<p>some content</p>"+ '<div class="buttons">'+ "<paper-button >More Info...</paper-button>"+ "<paper-button dialog

问题 Polymer 1.0 Chrome 50.0.2661.102 I am trying to enable chrome autofill with paper input. When selecting either input the standard appropriate chrome autofill prompt list appears, however selecting an available name, or email from the list does not populate the input, it just closes the chrome autofill list. <paper-input id="email" name="email" label="Email" type="email" autocomplete="email" ></paper-input> <paper-input id="password" name="password" label="Password" type="password"

问题 In this example (Plunk) there is bind between property and array item. firstName should change from 'John' to 'Test' on click, but it's not happening. How to make the property to change on item update? <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"> <!-- <link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn

问题 What's a succinct way to explain the difference between double brackets ( [[...]] ) and double braces ( {{...}} ) in Polymer 1.0? For instance, in the documentation for the <iron-list> element the sample HTML shows: <template is="dom-bind"> <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax> <iron-list items="[[data]]" as="item"> <template> <div> Name: <span>[[item.name]]</span> </div> </template> </iron-list> </template> Why is data bounded by double braces in one spot (

问题 I have a slider element that contains list of slides and a img to show hovered slide as shown below. I am binding currentImage between custom-slide (child) and custom-slider (parent) CASE I custom-slider.html <template> <div> <custom-slide current-image="{{currentImage}}"></custom-slide> <custom-slide current-image="{{currentImage}}"></custom-slide> <custom-slide current-image="{{currentImage}}"></custom-slide> </div> <img src="{{currentImage}}"> </template> It works perfectly when I used