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 <https://github.com/Polymer/docs/blob/master/js/app.js#L182> 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 <https://github.com/Polymer/docs/blob/master/js/app.js#L123:L126>, site-banner theme - swaps in page's content body <https://github.com/Polymer/docs/blob/master/js/app.js#L106:L110>. - it also does a few other things like records - analytics hit - sets the correct menu <https://github.com/Polymer/docs/blob/master/js/app.js#L118:L121> for the page - highlights the item in the left nav corresponding to the page - scrolls to a relative anchor <https://github.com/Polymer/docs/blob/master/js/app.js#L141:L147> if there's a hash in the url - hides the app-drawer <https://github.com/Polymer/docs/blob/master/js/app.js#L151:L152> (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() <https://github.com/Polymer/docs/blob/master/js/app.js#L128:L135> 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 <https://github.com/Polymer/docs/blob/master/js/app.js#L113:L116> 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 On Fri, Jul 25, 2014 at 4:21 AM, Mikael Magnusson <[email protected]> wrote: > 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 > > 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 [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/19476439-0ed5-437c-9bd2-b121844c7c32%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/19476439-0ed5-437c-9bd2-b121844c7c32%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCB9%2BEk7bqWGca4p5RHzMR06deubCu3o_gd1m%3DsdSXWO1w%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
