In this jsBin, I am trying to display a google-chart element by copypasting the first example from the docs page here. But the chart does not display.
Can anyone confirm or reject my hypothesis that the reason the bin is not working is because of a similar temporary server issue at polygit2.appspot.com (similar to this case of two days ago)? Or is there something wrong with the code that needs fixing?
http://jsbin.com/dusaqaqaje/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<!---- >
<base href="https://polygit.org/components/">
<!---- >
Toggle below/above as backup when server is down
<!---->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
<link href="google-chart/google-chart.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-button on-tap="_handleTap">Click Me</paper-button>
<!---- >
Below is just a copypaste from the docs page here:
https://elements.polymer-project.org/elements/google-chart
<!---->
<google-chart
type='pie'
options='{"title": "Distribution of days in 2001Q1"}'
cols='[{"label":"Month", "type":"string"}, {"label":"Days", "type":"number"}]'
rows='[["Jan", 31],["Feb", 28],["Mar", 31]]'>
</google-chart>
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
},
_handleTap: function() {
console.log('You clicked me!');
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
I think it's a temporary server issue, as you already proposed. Importing this google-chart element via polygit just throws an error instead of serving the element (you may see this behaviour in your import link).
Hopefully this will be fixed soon.
Related
I know that Polymer recommends to use style tag inside template tag since v1.1 but supports both. Can anyone tell me the advantages of doing so. If it is inertness then can you please give an example where keeping style tag outside template exposed it outside of shadow-dom
The 1.1 release notes indicate performance reasons:
Previously, we recommended that a <style> element should be placed inside an element's <dom-module> but outside of its template. This is still supported, but we've now optimized placing styles within the template itself, so having the <style> tag outside of the template will be slower.
If I read the code correctly, this is Polymer's procedure for parsing CSS:
Select child nodes that can contain CSS (including <style> and <template>).
For each node:
a. If the node is <template>, recurse on the node (go to step 1).
b. Else if the node is <style>, remove the node (to prevent style leak), and then append the node's text to the string buffer.
c. Else if the node is <link rel="import" type="css">, append its imported text to the string buffer.
Return the string buffer.
If all styles are parsed using this procedure, I don't understand how the placement of <style> would affect performance (maybe I'm missing something).
please give an example where keeping style tag outside template exposed it outside of shadow-dom
The <style> doesn't leak regardless of whether it's placed inside the <template> (because of step 2b above), as seen in the following demos.
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<div class="title">outside <x-foo> (should not be styled)</div>
<dom-module id="x-foo">
<style>
div.title {
font-family: Arial;
color: blue;
}
</style>
<template>
<div class="title">inside <x-foo></div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
</body>
codepen
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo></x-foo>
<div class="title">outside <x-foo> (should not be styled)</div>
<dom-module id="x-foo">
<template>
<style>
div.title {
font-family: Arial;
color: blue;
}
</style>
<div class="title">inside <x-foo></div>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo'
});
});
</script>
</dom-module>
</body>
codepen
Here is the code that should render a "raised" paper-button:
All the code is in a script tag and renders a paper-button that is not RAISED (see screen shot). I can click and see the RIPPLE effect, seems perfect except the appearance.
UPDATE :
for the moment the only way to get the correct rendering is by replacing
<paper-button raised>test</paper-button>
BY
<div dangerouslySetInnerHTML={{__html: '<paper-button raised>test</paper-button>'}} />
ANY WORKAROUND avoiding this 'dangerous' way?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<title>Hello React</title>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
</head>
<body>
<div id="content">
</div>
<script type="text/jsx">
var ButtonT = React.createClass({
render: function() {
return (
<div>
<paper-button raised="true">test</paper-button>
</div>
);
}
});
React.render(
<ButtonT />,
document.getElementById('content')
);
</script>
</body>
</html>
Should the "raised" attribute be passed as a this.props...?
It won't work in the current version of React. Custom attribute support is an open issue, though. For now, I've found this patch works well.
In JSX if you want a custom HTML attribute, you should prefix it with data-, it then will be resolved to actual name without prefix. See docs;
I'm having troubles with the following small self contained polymer example for databinding.
My understanding is that by having the consumer and supplier both have an attributes with data, with the expression {{stuff}} passed in, that this is referring to the variable "stuff", in the scope of the element.
When the supplier is loaded, and ready, it should populate the stuff variable, causing the consumer to insert the data.
http://jsbin.com/yawipodayo/1/edit?html,css,js,output
<!doctype html>
<html>
<head>
<script src="../bower_components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="../bower_components/polymer/polymer.html">
</head>
<body>
<polymer-element name="consumer" attributes="data">
<template bind="{{data}}">{{}}</template>
</polymer-element>
<polymer-element name="supplier" attributes="data">
<template></template>
<script>
Polymer('supplier', {
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "root">
<template>
<supplier data="{{stuff}}"></supplier>
<consumer data="{{stuff}}"></consumer>
</template>
</polymer-element>
<root>
</root>
</body>
</html>
You have an amount of glitches within your code. I will drop comments around the problems to be fixed:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
<!-- noscript tags are mandatory for elements not having script declared -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-consumer" attributes="data" noscript>
<!-- when you need to output data, output it -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<template>{{data}}</template>
</polymer-element>
<!-- names MUST include hyphens (everywhere) -->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-supplier" attributes="data">
<template></template>
<script>
// As of 0.5 you don’t need to specify name in script
// ⇓⇓⇓⇓
Polymer({
ready: function(){
this.data = "test"
}
});
</script>
</polymer-element>
<polymer-element name = "my-root" noscript>
<template>
<my-supplier data="{{stuff}}"></my-supplier>
<my-consumer data="{{stuff}}"></my-consumer>
</template>
</polymer-element>
<my-root>
</my-root>
</body>
</html>
The corrected version works as expected: http://jsbin.com/zewimobaro/1/edit
I am trying to use data binding through attributes on Polymer but I'm just going from failure to failure. I tried many syntax to send my JSON but nothing seems to work... Can I ask a little bit of help to see and understand what i was doing wrong ?
Thanks in advance,
Here is my HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Self Tutorial 02</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="import" href="social-nav.html">
</head>
<body>
<social-nav social='[{"twitter":"#cyberwarfighte1"}]'></social-nav>
</body>
</html>
And here is my polymer element :
<polymer-element name="social-nav" attributes="social">
<template>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
<div class="social-icons">
{{social}}
<template repeat="{{k in social}}">
{{k}}
</template>
</div>
</template>
<script>
Polymer('social-nav', {
});
</script>
</polymer-element>
Well, I found a way to solve my problem by myself.
For anyone who have the same problem than me, the answer is that your attribute need to be declared as an object inside the polymer element.
Here is my fixed code :
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
<polymer-element name="social-nav" attributes="social">
<template>
<div class="social-icons">
<template repeat="{{k in social}}">
<a class="{{k.social}}" href="{{k.link}}"><i>{{k.social}}</i></a>
</template>
</div>
</template>
<script>
Polymer('social-nav', {
created: function(){
this.social = []; // <- HERE !!
}
});
</script>
</polymer-element>
And my fixed element call with the good JSON
<social-nav social="[{'social':'twitter','link':'http://twitter.com/cyberwarfighte1'}, {'social':'facebook','link':'http://facebook.com/samuel.cardillo.5'}]"></social-nav>
Hope it can help someone :)
I am getting the following error:
Uncaught ReferenceError: Polymer is not defined
when I click on the link on the following element:
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
</head>
<body>
<my-element id="my_element"></my-element>
</body>
</html>
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
my link
</template>
<script>
Polymer('my-element', {
linkClicked: function(event, detail, sender) {
event.preventDefault();
}
});
</script>
</polymer-element>
Is this a Polymer bug or am I doing something wrong?
http://jsbin.com/cuxep/1/edit?html,output
As #badsyntax points out above, it looks like event.preventDefault() doesn't work well for the tap event. Changing to on-click seems to solve the problem of preventing a navigation though.
The error that you saw:
Uncaught ReferenceError: Polymer is not defined
That seems to be an artifact of malformed HTML, I suspect this was causing a race condition between loading polymer.html and your <script> element being executed. After cleaning up the HTML I was no longer able to reproduce it.
Here's a jsbin that works as I believe you intend: http://jsbin.com/boweliwe/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>console.clear()</script>
<script src="//www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<my-element></my-element>
<polymer-element name="my-element">
<template>
my link
</template>
<script>
Polymer('my-element', {
linkClicked: function(event, detail, sender) {
event.preventDefault();
}
});
</script>
</polymer-element>
</body>
</html>