Шаблонирование в Polymer: Как загрузить компоненты в определенной компоновке

гряду из PHP/направления Laravel и там мы используем лезвие шаблонизатор для загрузки компонентов в определенной компоновке, как это:Шаблонирование в Polymer: Как загрузить компоненты в определенной компоновке

Главная Схема называется: 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

в бэкэнде мы связываем route (позволяет называть его «/ content») контроллеру, который создает это представление. И в любое время, когда мы нажимаем на элемент меню с привязным тегом, мы загружаем представления в наш макет.

Теперь с Полимером, это совсем другая история, потому что у меня нет идеи, как продолжать.

Макет в полимере больше похож на этот. Давайте назовем этот макет-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», который, в свою очередь, должен иметь весь html -tags и head-tags и т. д., поэтому я бы загрузил полную страницу, которая является интуитивно понятной и нединамичной.

Я видел Polymer-Team выполнить то, что я пытаюсь сделать здесь:

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

Просто загрузка различного содержания в существующем полимере-макет.

Так что, пожалуйста, во имя бога, может ли кто-нибудь сказать мне, как это делается, потому что я серьезно понятия не имею в данный момент. Я предполагаю, что они использовали что-то вроде углового для создания представлений (из-за хэш-тега), но мой инстинкт говорит, что они сделали это как-то иначе.

Я был бы очень рад, если бы вы дали мне, кроме объяснения, как это делается, а также любой ресурс о том, как я буду воспроизводить это поведение. Может быть, хорошая статья или учебник.

Спасибо товарищей.

источник

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

Тег контента является частью собственного Shadow DOM http://w3c.github.io/webcomponents/spec/shadow/#the-content-element. Полимер упоминает его несколько раз в своих документах, но они не углубляются в глубину http://www.polymer-project.org/platform/shadow-dom.html. Googling «теневой тег контента контента» содержит несколько хороших примеров. –

Шаблонирование в Polymer: Как загрузить компоненты в определенной компоновке

ответ

Смежные вопросы