polymer

building a reorderable list (via dnd) using core-list and core-drag-drop

由 走远了吗. 提交于 2019-12-24 11:19:39
问题 I'm trying to build a reusable polymer web component that supports reordering items via drag and drop in a core-list. The interface I want is essentially the same as core-list <reorderable-list id="list" data="{{data}}" height="60"> <template> <some-reorderable-element> </some-reorderable-element> </template> </reorderable-list> My current thinking is that I want each row to be wrapped as follows <a-container> <draggable-member> <some-reorderable-element> </some-reorderable-element> <

How do I get the `dom-if` to re-evaluate its `if` condition?

由 …衆ロ難τιáo~ 提交于 2019-12-24 10:47:41
问题 In my code below, the if condition is only evaluated at init. How do I get it to re-evaluate the condition whenever myType is changed? <dom-module id="media-element"> <template> <template is="dom-if" if="[[isType(0)]]"> .... </template> </template> <script> Polymer({ is: 'media-element', properties: { myType: { type: Number, value: 0 } }, isType: function(t){return (this.myType===t);} }); </script> </dom-module> 回答1: You could use a computed binding like this: <template is="dom-if" if="[

Reading data-attribute from element inside iron-list

由 时光总嘲笑我的痴心妄想 提交于 2019-12-24 10:36:50
问题 I create a list of divs using an iron-list like this: <iron-list items="[[chats]]" as="item" style="height:500px;"> <template> <div class="item title" data-recipient$="[[item.recipient]]"> <iron-icon class="big" src="../icons/games.svg"></iron-icon> </div> </template> </iron-list> I have a Polymer method which is called later-on and loops the div.title . I can then manage to set their color, but I can not manage to read out the data-attribute: var elems = document.querySelectorAll(".title");

Polymer 2.0 call child event from parent

由 人走茶凉 提交于 2019-12-24 10:36:44
问题 I keep running into bad examples or outdated 1.0 docs regarding calling child event from the parent in Polymer 2.0. Essentially all I want to accomplish is triggering a child event from the parent. But I also can not seem to find a reference in the tree structure of the parent element as well when call "this". Index.html <!DOCTYPE html> <html> <head> <link rel="import" href="/elements/parent-element.html"> </head> <body> <parent-element></parent-element> <script src="js/polymer.js"></script>

Web Components in Different Frameworks

由 只愿长相守 提交于 2019-12-24 10:35:07
问题 I want to create Custom Web Components and use them in variety of frameworks like Angular, React and vanilla Javascript. My question is Should I use Polymer(or any other library) to create one or write down by extending "HTMLElement". What are the differences. 回答1: If you want to develop Custom Elements with Polymer, and intergrate them with another framework, you'll need to understand internals of both the Polymer and the other framework(s) to make them work flawlessly together, especially

Polymer dom-repeat not displaying the dynamically added values

由 天大地大妈咪最大 提交于 2019-12-24 09:49:08
问题 Polymer dom-repeat is not working as expected, when I add a new element to the Array dynamically, dom-repeat not displaying the value. I am using the Polymer's array mutation methods when pushing items into the array, but still not working. Please check the codepen link; <dom-module id="wind-studio-widget"> <template> <div on-tap='_addNewPad' style="cursor:pointer"><strong>Click Me</strong></div> <template id="padListContainerId" is="dom-repeat" items="[[padList]]"> <p style="border:1px solid

how to call a function in polymer after the elements have been created (like ready function in jquery)

由 為{幸葍}努か 提交于 2019-12-24 07:56:45
问题 I'm trying to write a function, which is related to the DOM, but the problem is , polymer calls the function before the DOM is loaded, and as expected it gives me an undefined error! I was looking for an event like onComplete or anything like this, so that It could read my function after loading the DOM. *** the best example is ready function in Jquery P.S : "ready:" event in polymer doesn't work properly, 回答1: You could do something like this: var domReady = function (func) { if ('complete'

Creating Single Page App in Django with Polymer

由 北慕城南 提交于 2019-12-24 07:48:35
问题 I'm currently working on a singe page app in django that makes use of Polymer Elements. My problem is when I'm changing template views. When I click on a page link to direct me to a new view I want to use the app-route , app-location and the iron-pages elements that Polymer has. This lets me simply change my current views without actually having to reload the whole page again and make requests. Apparently, in Django, whenever I click on a link it instead goes to the urls.py and tries to

How to import stylesheet dynamically Polymer 2.0

由 倖福魔咒の 提交于 2019-12-24 07:07:03
问题 I want to import my stylesheet with variable inside : <dom-module id="colors-palette"> <template> <style> :host { --dark-gray: #263238; --light-gray: #e6ebed; --light-blue: #00bcd4; --autovision-blue: #174291; --background-box-number-applications: red; --color-box-number-applications: orange; } </style> </template> </dom-module> I want to do it dynamically. My folder structure is : -themes -theme1 -style.html -theme2 -style.html -theme3 -style.html I detect the theme when my-app is ready and

How to load Facebook Javascript sdk in Polymer Project?

由 点点圈 提交于 2019-12-24 07:00:40
问题 I know there is a web component out there called facebook-login and I don't want to install for the simple matter... I tried adding Facebook Javascript SDK in web component. In the ready call I added basic javascript sdk. ready() { window.fbAsyncInit = function() { FB.init({ appId : 'your-app-id', autoLogAppEvents : true, xfbml : true, version : 'v2.10' }); FB.AppEvents.logPageView(); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js =
订阅 polymer