Newbie Q: Loading pages with injectPage

[Mikael Magnusson]

Hi,

I'm new to both Polymer and JS based web apps in general so please feel free to point me to basic stuff I need to read or do.

I'm trying to get a site running with a structure a lot like the Polymer Elements site (http://www.polymer-project.org/docs/elements/) with a nav bar to the left. I'm pretty familiar with web components/Polymer and got those parts working but what I need help with is how to code the actual site, in other words:

How do I load different pages with injectPage?

Are there any tutorials on how to do this? Guidelines, what to think about, when not to load using JS, etc?

Mike

[Eric Bidelman]

Hi Mikael,

The site is statically generated using Jekyll. This means we get static/persistent URLs, but for perf, decided to ajaxify the site so its bundle of common components only load once. This speeds things up quite a bit as you're navigating around. The difference is especially noticeable when viewing under a polyfill'd browser.

There's nothing special to injectPage() other than its interactions with custom elements.

The flow looks like this:

- capture all link clicks. if they're a link, we pass the link's href to injectPage(). The href is the URl of the page we want to load.

- injectPage() makes an xhr request to the url and swaps in relevant meta data (the page title, header title, site-banner theme

- swaps in page's content body.

- it also does a few other things like records

   - analytics hit

   - sets the correct menu for the page

   - highlights the item in the left nav corresponding to the page

   - scrolls to a relative anchor if there's a hash in the url

   - hides the app-drawer (on mobile) when the page is loaded.

There's challenges to making this work:

- custom elements in an xhr'd document are not upgraded. This is why you see the use of setAttribute() instead of setting the element's property directly.

- inline scripts (any demos in the page) are not evaluated when using .innerHTML. This means we have to manually do that ourselves.

- the history api `popstate` event is buggy in webkit. It erroneously fires on page load and which cause all kinds of pain.

BTW, if you're building a single page app, I'd recommend looking at combining core-animated-pages and core-scaffold instead. This is a much better flow for apps. The reason we didn't go that route in the first place was because those elements didn't exist!...and because we have a ton of pages (authored in .md for flexibility). SEO is important for a content-driven site.

Hope this helps,

Eric

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/19476439-0ed5-437c-9bd2-b121844c7c32%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mikael Magnusson]

Thank you for the thorough answer! I really appreciate the time you put in to the discussions in this group (also cool with the links to the exact row in GitHub, I've never seen that before).

When I couldn't get my head around the injectPage approach I went ahead with a core-animated-pages and core-scaffold instead (just like you suggested). My current work is here: http://sgu-app.appspot.com/

Work in progress.....

Regards,

Mike