模板高分子：如何組件加載到一個特定的佈局

我從一個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

在我們鏈接的後端路由（讓我們稱之爲「/內容」）到創建這個視圖的控制器。每當我們點擊帶有錨標籤的菜單項時，我們都會將視圖加載到我們的佈局中。

現在與聚合物，這是一個不同的故事，因爲我不知道如何繼續下去。

聚合物的佈局看起來更像這樣。讓我們把這種佈局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標籤，而這又會有所有的html - 標籤和頭標籤等等...所以我會加載完整的頁面，這是違反直覺和非動態的。

我見過的聚合物團隊完成，我想在這裏完成：

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

只需加載不同的內容到現有的聚合物佈局。

所以請以上帝的名義，任何人都可以告訴我它是如何完成的，因爲我現在不知道該怎麼做。我暗示，他們使用類似angular的東西來創建視圖（因爲哈希標籤），但是我的直覺說，他們以某種方式做了它。

我會很高興，如果你給我除了解釋如何完成，還有我將如何重現此行爲的任何資源。也許是一篇好文章或教程。

謝謝配偶。

來源

2014-09-19 LoveAndHappiness

您正在查找<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>

這樣你可以加載一個「頁」元素，這將包括它想要的佈局使用。

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

來源

2014-09-20 03:12:40

謝謝埃裏克。這幫了很多。我不明白，爲什麼這個元素沒有在文檔中提到。這是一個Javascript的唯一的東西，我還不知道什麼，或只有與聚合物有關嗎？也很抱歉遲到的答案。昨天一直在拖延:) – LoveAndHappiness 2014-09-21 13:19:41

內容標籤是原生Shadow DOM http://w3c.github.io/webcomponents/spec/shadow/#the-content-element的一部分。聚合物在他們的文檔中多次提到它，但它們沒有深入http://www.polymer-project.org/platform/shadow-dom.html。谷歌搜索「影子DOM內容標籤」得到了一些很好的例子。 – 2014-09-22 00:05:14

模板高分子：如何組件加載到一個特定的佈局

回答

相關問題