polymer

How to deploy a Dart Polymer app to Javascript using dart2js

由 こ雲淡風輕ζ 提交于 2019-12-04 10:20:31
I got a problem while deploying Dart code using Polymer to Javascript. I've created a polymer application with DartEditor and made a simple example. This example works in Dartium but when I try to build it as a Polymer App (in Javascript) and launch it, the app fails. How am I supposed to convert a Dart Polymer app to Javascript ? Here's the example code I made that fails : example.html : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <link rel="import" href="example-polymer.html"> <script type="application/dart">export 'package:polymer/init.dart';</script> <script

Passing data to a Polymer element

由 [亡魂溺海] 提交于 2019-12-04 10:11:49
When working with Web UI I could pass data to a component like this: <my-element" name="{{someName}}"></my-element> How do I pass data to a Polymer element? You can pass data to a Polymer element, but there is a little bit more detail involved. Imagine the element with a single field, name : // In element.dart. import 'package:polymer/polymer.dart'; @CustomTag("my-element") class MyElement extends PolymerElement with ObservableMixin { @observable String name; } And here is the accompanying html: // In element.html. <polymer-element name='my-element' attributes="name"> <template> <h2>{{name}}<

google-chart not displaying

由 試著忘記壹切 提交于 2019-12-04 09:28:52
I am trying to use the polymer component but it is not displaying. The element is there. I can see it in the inspector but it just does not display. There are also no error messages which does not help. I have tried to recreate the demo.html in the polymer docs and again nothing showing. Are there issues with the goole-chart element? <dom-module id="stats-page"> <style> code { color: #007000; } google-chart { height: 300px; width: 400px; } #selection-demo { position: relative; height: 300px; } #selection-chart { float: left; } #selection-display { display: inline-block; position: relative; top

How to use Font Awesome with Polymer LitElement

由 一曲冷凌霜 提交于 2019-12-04 08:45:46
I can't get the font awesome icons to work with LitElement, because css styles don't pierce the shadow boundaries of custom elements. Is it possible to use font awesome or other icons with LitElement? There is material icons in Polymer material library and the solutions used there helped me to solve the font awesome problem. index.html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script type="module" src="./src/components/fa-icon.js"></script> <title>Font Awesome test</title> </head>

Change style programmatically

由 吃可爱长大的小学妹 提交于 2019-12-04 08:45:14
问题 I'm attempting to follow the Custom property API for Polymer elements docs with regards to updating an element's CSS properties (and styles) programmatically but can't seem to get it working. Here is my current attempt: <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> <dom-module id="my-namecard"> <style> :host { --color: green; } span { color: var(--color, orange); } </style> <template> <div> Hi! My name is <span>{{name}}</span> </div> <button on-click=

Polymer: Disable HTML Import caching

由 血红的双手。 提交于 2019-12-04 08:15:30
How do I disable HTML Import caching for Polymer development? Changes made to my custom HTML web component are not being shown when I refresh the browser. HTML Import caching will sometimes mean that changes made to HTML files that get imported do not get reflected upon browser refresh. Take the following import as an example: <link rel="import" href="./my-element.html"> If a change is done to my-element.html after previously loading the page, then the changed file may not be downloaded and used in the current document when it is refreshed (as it was previously imported and cached). This can

How to pass parameters in Polymer 2.0 on-tap function?

由 ≯℡__Kan透↙ 提交于 2019-12-04 08:03:20
I'm using Polymer 2.0 and I have a dom-repeat for different to-do cards. What I want to do is remove the card when I click on it. So I tried this on-tap=deleteNote([[index]]) which uses the index from the dom-repeat . However Polymer doesn't execute the function. What am I doing wrong? Another solution could be the dataset object within the event.target . You can define your properties with the data- prefix: <div on-tap="doSomething" data-item$="[[item]]"></div> And within your doSomething() listener you can get the dataset object: doSomething(event) { const item = event.target.dataset.item; .

Reloading page on every click using Polymer and app-route

由 拜拜、爱过 提交于 2019-12-04 07:13:36
问题 I am using app-route and iron-pages with a paper-toolbar to display my views. On one of my views, main-view , displays a randomly chosen image which changes each time the page is loaded. Every time main-view is selected from the toolbar, the page should reload so that a new image will be shown. The problem is, if I am already at the /main-view url and I select it from the toolbar it doesn't refresh the page. Is there any way to do this? 回答1: you should definitely add on-tap to render new

How to inject HTML into a template with Polymer 1.x?

由 无人久伴 提交于 2019-12-04 06:49:44
A part of the template of my Polymer component is supposed to render unescaped HTML from a JSON response (yes, it's safe to do so in this case). I used juicy-html ( https://github.com/Juicy/juicy-html ) for this up until now, but it doesn't work anymore with Polymer 1.x. The corresponding part of my template looked pretty much like this: <template if="{{item.part1}}"> <div> <template is="juicy-html" content="{{item.part1.part2 | callFunction}}"></template> </div> </template> I read about a few solutions for injecting HTML with earlier versions of Polymer, but I'm wondering if there is a

Polymer data binding doesn't work when assigning markup to innerHTML that contains attribute data binding

由 我的未来我决定 提交于 2019-12-04 06:07:24
What is the simplest way to create data bindings to attributes, in Polymer, when working with innerHTML? This is an example of what i mean - http://jsfiddle.net/ry6og1q9/2/ <paper-input inputValue="{{foo}}" label="static foo"></paper-input> "staticFoo" paper-input is data bound to with {{foo}} - a two way data binding. var c = this.$.dynamicFooPlaceHolder; c.innerHTML = ''; var e = document.createElement('div'); e.innerHTML = '<paper-input id="dynamicFoo" inputValue="{{foo}}" label="dynamic foo"></paper-input>'; c.appendChild(e); But "dynamicFoo", created with innerHTML, is not bound to the
订阅 polymer