gpt4 book ai didi

laravel - polymer 模板 : How to load components into a specific layout

转载 作者:行者123 更新时间:2023-12-02 13:18:31 27 4
gpt4 key购买 nike

我来自 PHP/Laravel 方向,我们使用 Blade 模板引擎将组件加载到特定布局中,如下所示:

主布局名为: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”)链接到创建此 View 的 Controller 。每当我们单击带有 anchor 标记的菜单项时,我们都会将 View 加载到布局中。

现在有了 Polymer,这是一个不同的故事,因为我不知道如何继续下去。

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>

就像这样,我知道上面的结构可能有错误,但我正在从我的脑海中提取这些信息。

现在,如果我有一个不同的 View ,我想加载到“内容”区域内,直观上我会有一个加载“content.html”的 achor 标签,而该标签又必须拥有所有 html-标签和头标签等等...所以我会加载完整的页面,这是违反直觉的且非动态的。

我已经看到 polymer 团队实现了我在这里想要实现的目标:

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

只需将不同的内容加载到现有的 polymer 布局中即可。

所以请以上帝的名义,任何人都可以告诉我它是如何完成的,因为我现在真的不知道。我建议他们使用像 Angular 这样的东西来创建 View (因为哈希标签),但我的直觉告诉我,他们以其他方式做到了。

如果您除了解释如何完成此操作之外,还给我提供有关如何重现此行为的任何资源,我将非常高兴。也许是一篇好文章或教程。

谢谢 friend 。

最佳答案

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

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>

这样您就可以加载“页面”元素,它将包含它想要使用的布局。

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

关于laravel - polymer 模板 : How to load components into a specific layout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25935000/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com