Question

我来自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这样的东西来创建视图（因为hash-tag），但是我的直觉说，他们以其他方式做到了。

我很高兴，如果你给了我除了解释它是如何完成的，还有关于我将如何重现这种行为的任何资源。也许是一篇好文章或教程。

感谢队友。

Answer 1

您正在寻找<content>标记。看看它是如何工作的。

简单的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>

家庭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>

这样你就可以加载一个“page”元素，它将包含它想要使用的布局。

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

聚合物中的模板化：如何将组件加载到特定布局中

1 个答案: