search

erikringsmuth / app-router

Router for Web Components
https://erikringsmuth.github.io/app-router/
MIT License
611 stars 83 forks source link

Why would an element care about what layout it goes into? #31

Closed kevinwestern closed 9 years ago

kevinwestern commented 9 years ago

I can't figure out why an element or template you want to import should care about what layout it belongs to. I thought the point of custom elements is they would be re-usable. What I would expect is for a route to load an element or template and insert it into a tag.

E.g.

<!DOCTYPE html>
<html>
  <head>
    <title>Some Page</title>
    <link rel="import" href="bower_components/app-router/app-router.html">
    <link rel="import" href="bower_components/pushstate-anchor/pushstate-anchor.html">
    ...
    <base href="/">
  </head>
  <body unresolved fullbleed>
    <app-router mode="pushstate" trailingSlash="ignore">
      <app-route path="/home" import="/pages/home.html" template></app-route>
      <app-route path="/dashboard" import="/pages/dashboard.html" template></app-route>
      <app-route path="/" import="/pages/home.html" template></app-route>
    </app-router>
    <core-scaffold id="scaffold">
      <nav>
        <core-toolbar tool flex>
          ...
        </core-toolbar>
        <core-menu selected="0">
          <paper-item icon="label-outline" label="Home">
            <a href="/home"></a>
          </paper-item>
          <paper-item icon="label-outline" label="Dashboard">
            <a href="/dashboard"></a>
          </paper-item>
        </core-menu>
      </nav>
      <div fit>
        <content>
           <!-- templates and elements are loaded here -->
        </content>
      </div>
    </core-scaffold>
  </body>
</html>
stefanasseg commented 9 years ago

I totally agree - I want it the same way!

And this is actually possible, just not documented: Just put the element including the <app-route> elements into your <content> resp. replace <content> with <app-router>. I'm doing it on a page I'm currently working on: http://stefanasseg.com/trackattack I just have one problem with it so far - it doesn't work reliably in mobile browsers :-/ Not sure if app-router causes the problem, though. I'm in the process of investigating that.

kevinwestern commented 9 years ago

Thanks @stefanasseg

erikringsmuth commented 9 years ago

Yeah, this should work too. The page element won't be able to set the title in the toolbar since the layout is outside of the page but you can wire that up with JS.

<!DOCTYPE html>
<html>
  <head>
    <title>Some Page</title>
    <link rel="import" href="bower_components/app-router/app-router.html">
    <link rel="import" href="bower_components/pushstate-anchor/pushstate-anchor.html">
    ...
    <base href="/">
  </head>
  <body unresolved fullbleed>
    <core-scaffold id="scaffold">
      <nav>
        <core-toolbar tool flex>
          ...
        </core-toolbar>
        <core-menu selected="0">
          <paper-item icon="label-outline" label="Home">
            <a href="/home"></a>
          </paper-item>
          <paper-item icon="label-outline" label="Dashboard">
            <a href="/dashboard"></a>
          </paper-item>
        </core-menu>
      </nav>
      <div fit>
        <app-router mode="pushstate" trailingSlash="ignore">
          <app-route path="/home" import="/pages/home.html" template></app-route>
          <app-route path="/dashboard" import="/pages/dashboard.html" template></app-route>
          <app-route path="/" import="/pages/home.html" template></app-route>
        </app-router>
      </div>
    </core-scaffold>
  </body>
</html>
kevinwestern commented 9 years ago

Ok great, thanks @erikringsmuth