Polymer 中的模板：如何将组件加载到特定布局中
Posted
技术标签:
【中文标题】Polymer 中的模板：如何将组件加载到特定布局中【英文标题】：Templating in Polymer: How to load components into a specific layout 【发布时间】：2014-09-19 13:22:23 【问题描述】：我来自 php/Laravel 方向，我们使用刀片模板引擎将组件加载到特定布局中，如下所示：
主布局调用：layout.blade.php
<html>
<head><title>Whatever</title></head>
<body>
@yield('content')
</body>
然后我们通过这样的文件在这个布局中加载我们的组件，称为：content.php
@extends(layout)
@section('content')
<h1>This contents is loaded into the Layout</h1>
<p>Yada yada yada</p>
@stop
在后端，我们将路由（我们称之为“/content”）链接到创建此视图的控制器。每当我们点击带有锚标签的菜单项时，我们都会将视图加载到我们的布局中。
现在有了 Polymer，情况就不同了，因为我不知道该怎么做。
聚合物中的布局看起来更像这样。我们称之为 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>
是这样的，我知道上面的结构可能有错误，但我正在把这些信息从我的脑海中提取出来。
现在，如果我想在“内容”区域内加载不同的视图，直觉上我会有一个加载“content.html”的 achor-tag，而它又必须拥有所有的 html-标签和头标签等等......所以我会加载完整的页面，这是违反直觉和非动态的。
我已经看到 Polymer-Team 完成了我想要在这里完成的工作：
http://www.polymer-project.org/components/core-elements/demo.html#core-scroll-header-panel
只是将不同的内容加载到现有的聚合物布局中。
所以请以上帝的名义，谁能告诉我它是如何完成的，因为我现在真的不知道。我建议，他们使用 angular 之类的东西来创建视图（因为标签），但我的直觉说，他们以其他方式制作了它。
如果你除了解释它是如何完成的之外，还给我任何关于我将如何重现这种行为的资源，我会非常高兴。也许是一篇好文章或教程。
谢谢小伙伴们。
【问题讨论】：
【参考方案1】：您正在寻找<content> 标记。看看它是如何工作的。
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>
主页.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>
这样你可以加载一个“页面”元素，它会包含它想要使用的布局。
http://erikringsmuth.github.io/app-router/#/layouts
【讨论】：
谢谢埃里克。这有很大帮助。我不明白，为什么文档中没有提到这个元素。这是只有 javascript 的东西，我对此一无所知，还是只与 Polymer 有关？也很抱歉迟到的答案。昨天一直在拖延:) 内容标签是原生 Shadow DOM w3c.github.io/webcomponents/spec/shadow/#the-content-element 的一部分。 Polymer 在他们的文档中多次提到它，但他们没有深入了解polymer-project.org/platform/shadow-dom.html。谷歌搜索“shadow dom 内容标签”得到了一些很好的例子。以上是关于Polymer 中的模板：如何将组件加载到特定布局中的主要内容，如果未能解决你的问题，请参考以下文章