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 On Wednesday, July 30, 2014 4:30:08 AM UTC+2, Eric Bidelman wrote: > > 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] > <javascript:>> 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] <javascript:>. >> 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/90339b82-4835-4999-b4c5-5fb6c743901d%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
