polymer | 易学教程

Polymer 1.0 on firefox ReferenceError: Polymer is not defined

阅读更多关于 Polymer 1.0 on firefox ReferenceError: Polymer is not defined

问题 Hello I have a working Polymer 1.0 web page on Chrome and Opera. Now I need the page to run in Firefox and Safari. I have the following test: <!DOCTYPE html> <html> <head> <?php use Cake\Routing\Router; ?> <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?> <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html"> <dom-module id="test-element"> <template > <h1>It works</h1> </template> <script> Polymer({ is: "test

How to access content of dom-if inside a custom element?

阅读更多关于 How to access content of dom-if inside a custom element?

问题 In a custom element I want to access a span and append a child to it but all usual accessors give undefined : <template> <template is="dom-if" if="[[condition]]" restamp> <span id="myspan"></span> </template> </template> ready() { var a = this.$.myspan; //<------- is undefined var b = this.$$.myspan; //<------- is undefined var c = document.getElementById("myspan"); //<------- is undefined var d = this.$$("#myspan"); //<------- is undefined } How to access a span in this case? UPDATE: here is

how to dynamically append an element to dom-if in Polymer?

阅读更多关于 how to dynamically append an element to dom-if in Polymer?

问题 My goal is to append an element to existing dom-if dynamically. Problem is that after appending I can see appended element in the DOM three but it never reacts on condition and stays always hidden. <template> <template id="domif" is="dom-if" if="[[condition]]" restamp></template> </template> ready() { var el = document.createElement("input"); Polymer.dom(this.$.domif).appendChild(el); Polymer.dom.flush(); } Exploring DOM with hardcoded dom-if and input shows that <input /> element is actually

Polymer.js two-way binding to textarea value

阅读更多关于 Polymer.js two-way binding to textarea value

问题 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 =

Polymer.js two-way binding to textarea value

阅读更多关于 Polymer.js two-way binding to textarea value

Disqus comments don't work in a polymer custom element

阅读更多关于 Disqus comments don't work in a polymer custom element

问题 I don't know how to make a disqus comments code to work inside of my custom elements. Structure of my site: | index.html --------\ my-app.html (custom element) ----------------\ my-testView1.html (custom element) ----------------\ my-testView2.html (custom element) I need to put disqus comments inside my-testView1.html and my-testView2.html Structure of index.html : <body> <my-app> <div class="disqusClass1" id="disqus_thread"></div> <div class="disqusClass2" id="disqus_thread"></div> <my-app>

Polymer 1.0 'array-style' path accessors, alternative to bracket notation in expressions

阅读更多关于 Polymer 1.0 'array-style' path accessors, alternative to bracket notation in expressions

问题 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

relative path resources from JS with HTML imports

阅读更多关于 relative path resources from JS with HTML imports

问题 I've got a (Polymer) web component that I want to make accessible to people in a cross-origin resource sharing (CORS) fashion. That works fine except I'm not sure how I can give a relative path for resources like images and JSON files from JS code inside that component. They are interpreted as relative to the containing page, not relative to the HTML import. What I think I want is a JS variable that gives the path of the containing html file that was imported. A relative path is important

Polymer 1 nested dom-if within dom-repeat not updating when data changes

阅读更多关于 Polymer 1 nested dom-if within dom-repeat not updating when data changes

问题 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

Polymer multiple inheritance/composition

阅读更多关于 Polymer multiple inheritance/composition

问题 Polymer website says multiple inheritance (or composition) is not supported using 'extend' attribute in Polymer. I want an element to be composed of some methods from one Polymer element, and some others from another, to have it reflect application logic. Is there currently any way to implement that in Polymer? (like doing that using javascript mixins) 回答1: Polymer now supports mixin: var mixinObj = { foo: function() { /* ... */ } }; var mixinObj2 = { foo2: function() { /* ... */ } }; Polymer