I'm making an SPA website using Polymer. My main HTML page looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script src="/bower_components/system.js/dist/system.js"></script>
<script>
System.config({
map:{
traceur: '/bower_components/traceur/traceur.min.js'
}
});
</script>
<meta charset="UTF-8">
<link rel="import" href="/html/foobar-app.html">
</head>
<body>
<foobar-app></foobar-app>
</body>
</html>
with foobar-app defined as:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">
<link rel="import" href="/html/pages/all-territories.html">
<link rel="import" href="/html/pages/app-login.html">
<dom-module id="foobar-app">
<template>
<style></style>
<iron-pages id="pages" selected="1">
<app-login on-logged-in="onLoggedIn"></app-login>
<all-territories></all-territories>
</iron-pages>
<iron-ajax
url="http://api.foobar.com/data">
</iron-ajax>
</template>
<script>
(function() {
Polymer({
is: 'foobar-app',
// ...
});
})();
</script>
</dom-module>
When I make a change to foobar-app's code everything works fine and updates if I refresh the page. But if I make a change to one of its sub-components or to one of the sub-component's own sub-components, the related html doesn't refresh and I have to manually browse to the related HTML file and press refresh. Else, only the top HTML file is refreshed (foobar-app.html).
How can I ask Chrome to refresh the current page and all its imports, sub-imports etc. whatever the deepness?
I've tried the following without success:
Pressing CTRL + MAJ + R twice
Pressing CTRL + R twice
Try opening the inspector for this page (right click, inspect). Then right click on the refresh icon, finally select "Empty Cache and Hard Reload" from the refresh drop down.
I have had problems with IFrames doing this, but never ajax calls; but this fixed it for me.
Related
I'm new to polymer. Below code is not displaying anything. Just a blank page. I'm running this on the default python server. Any idea why this is happening?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"/>
<link rel="import" href="bower_components/polymer/polymer.html"/>
</head>
<body>
<hello-element></hello-element>
<dom-module id="hello-element">
<template>Hello World</template>
</dom-module>
<script>
HTMLImports.whenReady( function () {
Polymer({
is: "hello-element"
})
})
</script>
</body>
</html
First of all, your closing html tag is malformed. It should be </html> instead of <html. Perhaps you made a mistake while copying, but you should check just in case.
In addition, your script element should have a closing tag, like so:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Furthermore, the link tag should not have this slash / before closing it, like so:
<link rel="import" href="bower_components/polymer/polymer.html">
Try to use HTML tags Properly. In HTML5, so-called void elements (elements that can't have content -> link,meta) don't need the closing, but when comes to tag it must be closing tag. It takes content between takes as javascript code.
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Try to use above format to get correct output. But avoid creating componments in Main document. Create in other file and import it
I'm brand new to polymer (2.0), so I was just practicing with a sample application. I wanted to create a basic 'login' screen with two paper input fields.
I'll show you what I have got so far.
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js">
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./testing/login-page.html">
</head>
<body unresolved>
<login-page></login-page>
</body>
</html>
And my login-page.html, which is in a folder called 'testing'
<dom-module id="login-page">
<template>
<h2>Hello!</h2>
<paper-input label="test">test</paper-input>
</template>
<script>
Polymer({
is: 'login-page',
properties: {
prop1: {
type: String,
value: 'login-page',
},
}
});
</script>
</dom-module>
I have installed the paper-input using bower with the following command: bower install paper-input
Problem is, it's not showing up, but it is present in the shadow dom when I inspect the page. Everything in the h2 tag is showing up. Again, I'm brand new to polymer, so is there something I'm doing wrong?
If you are using Polymer 2.0 you need to download elements with #2.0-preview suffix.
In your case
bower i --save PolymerElements/paper-input#2.0-preview
and then import it in your page
<link rel="import" href="/bower_components/paper-input/paper-input.html">
I want to toggle the open/closed state of the content of a paper-card element by clicking the heading of the paper-card only.
When I click inside the open content, I want the card to remain in the open state. And not toggle to the closed state.
Open this jsBin to read further and demo what I'm describing.
http://jsbin.com/kecemorojo/edit?html,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-card/paper-card.html" rel="import">
<link href="iron-collapse/iron-collapse.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-card heading="Click Me to Open" on-tap="_toggleCollapse">
<iron-collapse id="collapse">
<div class="card-content">
I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it.
</div>
</iron-collapse>
</paper-card>
</template>
<script>
(function(){
Polymer({
is: "x-element",
_toggleCollapse: function() {
this.$.collapse.toggle();
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
_toggleCollapse: function(e) {
if (!e.target.classList.contains('card-content')) {
this.$.collapse.toggle();
}
}
In addition to the accepted answer, at least two other solutions also exist:
if (e.target.classList.contains('title-text'))
here
and
if (e.target.classList.contains('title-text', 'style-scope', 'paper-card'))
here
Depending on the situation, one or the other might work better depending on what is being clicked inside the paper-card content section.
http://jsbin.com/kacatozolo/1/edit?html,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-card/paper-card.html" rel="import">
<link href="iron-collapse/iron-collapse.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<paper-card heading="Click Me to Open" on-tap="_toggleCollapse">
<iron-collapse id="collapse">
<div class="card-content">
I want to do stuff inside this content area. Some of it will involve clicking things. But when I click things, I want this paper card to remain open and not close. So I can still see this text and the other things I need to click on. But, unfortunately, with this setup, when you click on this text, the card closes and no one can read the text anymore. I'm looking for a solution that let's me open and close the card by clicking on the header "Click Me to Open" only. See what I mean by clicking on this paragraph right now. Watch it close. And not remain open like I want it.
</div>
</iron-collapse>
</paper-card>
</template>
<script>
(function(){
Polymer({
is: "x-element",
_toggleCollapse: function(e) {
if (e.target.classList.contains('title-text', 'style-scope', 'paper-card')) {
this.$.collapse.toggle();
}
},
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
I can run all the following simplified code in jsbin without any error. The size of the real code is large - it contains many imports, and properties and functions within Polymer().
The real version of the following simplified version of index.html has been working fine with both Iceweasel and Chromium in localhost:
(version 1)
<!DOCTYPE html>
<html>
<head>
<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-element">
<template>
<paper-input></paper-input>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function(){
Polymer({
is: 'my-element'
});
});
</script>
<my-element></my-element>
</body>
</html>
However, when the real version of above index.html is served from remote host, the function passed to HTMLImports.whenReady never gets called. Besides, Iceweal complains ReferenceError: Polymer is not defined.
Then I borrow this technique to have this version (version 2):
<!DOCTYPE html>
<html>
<head>
<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-element">
<template>
<paper-input></paper-input>
</template>
</dom-module>
<script>
var init=function(){
Polymer({
is: 'my-element'
});
};
if(HTMLImports.ready)
init();
else{
console.log("called"); //Always comes here!
HTMLImports.whenReady(init);
}
</script>
<my-element></my-element>
</body>
</html>
comment for above version: The real large version always runs to HTMLImports.whenReady(init); but function init() never gets called.
I also tried this technique and make the simplified code look like this (version 3):
<!DOCTYPE html>
<html>
<head>
<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-element">
<template>
<paper-input></paper-input>
</template>
</dom-module>
<script>
document.addEventListener('WebComponentsReady',function(){
console.log("called"); //Never gets called!
Polymer({
is: 'my-element'
});
});
</script>
<my-element></my-element>
</body>
</html>
console.log() in the above version is never executed.
How do I change the code so that it guarantees every element will be properly loaded even in cases where the file size is big and network and server are slow?
Thank you in advance!
(edit 1)
My browsers respond today differently than last night:
version 1: Both Iceweasel (i.e. Firefox?) and Chromium (i.e. Chrome?) remain silent and yield a blank page without any error or warning in developer's console.
version 2, version 3, and #akc42's version: Chromium displays the expected correct page. Iceweasel complains ReferenceError: Polymer is not defined.
(edit 2)
My test results are different from those 20 minutes ago as follows:
version 2: Chromium gives blank page. Iceweasel complains ReferenceError: Polymer is not defined.
version 3: Chromium complains Uncaught ReferenceError: Polymer is not defined. Iceweasel complains `ReferenceError: Polymer is not defined'.
I am reading the note here. I will split index.html into two and see if it make any different results.
(edit 3)
I am sad to report that splitting index.html into two files does not make any difference - both Chromium and Iceweasel quietly give blank page.
(version 4):
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="my-element.html">
</head>
<body>
<my-element></my-element>
</body>
</html>
my-element.html (version 4a):
<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
<dom-module id="my-element">
<template>
<paper-input></paper-input>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function(){
console.log("called"); //Never gets called!
Polymer({
is: 'my-element'
});
});
</script>
my-element.html (version 4b):
<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
<dom-module id="my-element">
<template>
<paper-input></paper-input>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element'
});
</script>
Many thanks to the helps from #ScottMiles and #akc42 !
My troubles turns out to come from ClouldFlare's cloud services. Their cache system heavily rewrites nearly all of my import files.
After I bypass CloudFlare's cloud, Chromium is happy with versions 1 and 4; Iceweasel complains `ReferenceError: Polymer is not defined' but displays the correct page with version 4.
Nevertheless, I much like their services. So, I will see if I can acquire their helps. (Currently I am using their free services)
Meanwhile, I will try vulcanize to see if the compressed single file is immune to ClouldFlare's cache system.
If anyone is generous to share your successful experience with ClouldFlare and Polymer, I will be much grateful, too.
(edit)
After I bypass CloudFlare's cloud, both Chromium and Iceweasel works flawlessly with all above 4 versions.
(edit 2)
I am pleased to quote ClouldFlare's swift reply to my request for help as follows:
This is strange- can you reenable CloudFlare on your trial subdomain and try a few things to see if we can narrow this down:
- Go to the 'Speed' page on the dashboard.
- Disable Rocket Loader by setting it to off
- If this doesn't correct the issue, try toggling the Minify options off at the top of the Speed page.
Rocket loader is a beta feature and so can sometimes cause issues- it is difficult to ensure 100% compatibility with all javascript on the web.
After I disabled Rocket Loader as ClouldFlare's expert told me, all the issues I encountered are gone! I am happy to mark this question as answered.
You don't need to wait for anything to call Polymer({is:'my-element'}); What you do do is have an ready function is the object you call Polymer with to tell you when its ready to go.
<!DOCTYPE html>
<html>
<head>
<script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<link rel="import" href="http://polygit.org/components/paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-element">
<template>
<paper-input></paper-input>
</template>
</dom-module>
<script>
Polymer({
is: 'my-element',
ready: function() {
console.log('element ready')
}
});
</script>
<my-element></my-element>
</body>
</html>
Normally you would declare the my-element object in another file that you would import.
Also, if you want to use any databinding at the index.html level you can use the element, which you then can listen for all elements in it complete, so
<body>
<template is="dom-bind" id="app">
<my-element></my-element>
</template>
<script>
var app = document.getElementById('app');
app.addEventListener('dom-change', function() {
//perform app initialisation here
});
</script>
</body>
Hello
I'm starting with Polymer 1.0 and I'm trying to create my first element and load into an html page. I'm using Chrome Dev Editor, the project was created correctly because I could load all the example. After that I eliminate all the example code and create a:
Folder "elements" into the project
"hello-world.html" with the following code:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" noscript>
<template>
<h1>Hello World</h1>
</template>
Updated the code in the "index.html" file
<!doctype html>
<html>
<head>
<title>PolyExample</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/hello-world.html">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Test Polymer</h1>
<hello-world></hello-world>
</body>
</html>
I will appreciate any help about this
Thanks in advance
Your code has a serious problem in the way you create your element,
You use a dom-module element to create a new element and you need to write some JS to initialize the element. Below is an example
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<h1>Hello World</h1>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>
The script tag with that code is essential for your element to work.
This is probably as simple as it gets.
To read more on that follow the link:
https://www.polymer-project.org/1.0/docs/start/quick-tour.html