Templating in Polymer: How to load components into a specific layout

I am coming from a PHP/Laravel direction and there we use the blade templating engine to load components into a specific layout like this:

Main Layout called: layout.blade.php

<html>
<head><title>Whatever</title></head>
<body>
@yield('content')
</body>

And then we load our components inside this layout by a file like this, called: content.php

@extends(layout)
@section('content')
<h1>This contents is loaded into the Layout</h1>
<p>Yada yada yada</p>
@stop

In the backend we link the route (lets call it "/content") to a controller that creates this view. And anytime we click on a menu-item with an anchor-tag, we load the views into our layout.

Now with Polymer, this is a different story, because I have no Idea how to go on about.

A layout in polymer looks more like this. Let's call this layout-one.html

<html>
<head><title>Whatever</title></head>
<body>
<core-drawer-panel>
<core-header-panel drawer></core-header-panel>
<core-header-panel content>
<core-toolbar main></core-toolbar>
<div>Main Content goes here...</div>
</core-header-panel>
</core-drawer-panel>
</body>
</html>

It's something like that, I know the structure above might have a mistake, but I am pulling this information out of my head.

Now if I have a different view I want to load inside the "content"-Area, intuitively I would have an achor-tag that loads a "content.html", which in turn would have to have all the html-tags and head-tags and so on... so I would load the complete page, which is counter-intuitive and non-dynamic.

I've seen the Polymer-Team accomplish, what I am trying to accomplish here:

http://www.polymer-project.org/components/core-elements/demo.html#core-scroll-header-panel

Just loading different contents into an existing polymer-layout.

So please in the name of god, can anyone tell me exactly how it is done, because I seriously have no idea at the moment. I am suggesting, that they used something like angular to create the views (because of the hash-tag), but my instinct says, that they made it somehow else.

I would be most glad, if you gave me besides the explanation on how it is done, also any resource on how I would be reproduce this behaviour. Maybe a good article or tutorial.

Thanks mates.

You're looking for the <content> tag. Check out how this works.

simple-layout.html

<polymer-element name="simple-layout" noscript>
  <template>
    <core-drawer-panel>
      <core-header-panel drawer>
        <content select=".title"><!-- content with class 'title' --></content>
      </core-header-panel>
      <core-header-panel content>
        <core-toolbar main></core-toolbar>
        <content><!-- all other content will show up here --></content>
      </core-header-panel>
    </core-drawer-panel>
  </template>
</polymer-element>

home-page.html

<link rel="import" href="simple-layout.html">
<polymer-element name="home-page" noscript>
  <template>
    <simple-layout>

      <div class="title">Home</div>

      <h1>This contents is loaded into the main part of the layout.</h1>
      <p>Yada yada yada. More content in the main layout.</p>

    </simple-layout>
  </template>
</polymer-element>

This way you can load a "page" element and it will include the layout it wants to use.

http://erikringsmuth.github.io/app-router/#/layouts

来源：https://stackoverflow.com/questions/25935000/templating-in-polymer-how-to-load-components-into-a-specific-layout

标签

laravel

polymer