在Polymer中进行模板制作:如何将组件加载到特定布局中 [英] Templating in Polymer: How to load components into a specific layout
问题描述
我来自PHP/Laravel方向，在那里我们使用刀片模板引擎将组件加载到特定的布局中，如下所示:
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:
主布局称为:layout.blade.php
Main Layout called: layout.blade.php
<html>
<head><title>Whatever</title></head>
<body>
@yield('content')
</body>
然后，我们通过一个名为content.php
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
在后端，我们将路由(简称为"/content")链接到创建此视图的控制器.而且，只要我们单击带有锚标签的菜单项，就会将视图加载到布局中.
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.
现在与Polymer一起，这是一个不同的故事，因为我不知道如何继续.
Now with Polymer, this is a different story, because I have no Idea how to go on about.
聚合物中的布局看起来更像这样.我们称其为layout-one.html
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.
现在，如果我要在内容"区域中加载其他视图，那么凭直觉我将拥有一个加载"content.html"的achor标签，而该标签又必须包含所有html-标签和头部标签等等...因此我将加载整个页面，这是违反直觉的，而且不是动态的.
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.
我已经看到了Polymer-Team的成就，而我想在这里完成的事情:
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.
所以请以上帝的名义，谁能确切地告诉我这是怎么做的，因为我现在真的不知道.我建议他们使用诸如angular之类的东西来创建视图(由于井号标签)，但是我的直觉是，他们以其他方式创建了视图.
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.
感谢队友.
推荐答案
您正在寻找<content>标记.看看它是如何工作的.
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
这篇关于在Polymer中进行模板制作:如何将组件加载到特定布局中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
