OctoberCms-Components

组件是可配置的构建元素，可以附加到任何页面，部分页面或布局。组件是十月份的主要功能。每个组件都实现了一些扩展您网站的功能。组件可以在页面上输出HTML标记，但这不是必需的-组件的其他重要功能是处理AJAX请求，处理表单回发和处理页面执行周期，从而可以向页面注入变量或实现网站安全。

本文介绍了组件的基础知识，而没有说明如何将组件与AJAX一起使用或如何将组件开发为插件的一部分。

注意：在局部零件中使用组件的功能有限，有关动态局部零件的文章中对此进行了详细说明。

介绍

如果使用后端用户界面，则可以通过单击“组件”面板中的组件将组件添加到页面，分页和布局中。如果使用文本编辑器，则可以通过将组件的名称添加到模板文件的“ 配置”部分来将其附加到页面或布局。下一个示例演示如何向页面添加演示待办事项组件：

title = "Components demonstration"
url = "/components"

[demoTodo]
maxItems = 20
==
...

这将使用组件部分中定义的属性来初始化组件。许多组件都具有属性，但这不是必需的。一些属性是必需的，而某些属性具有默认值。如果不确定组件支持哪些属性，请参考开发人员提供的文档，或使用October后端中的Inspector。当您在页面或布局组件面板中单击某个组件时，将打开“检查器”。

引用组件时，它会自动创建一个与组件名称匹配的页面变量（demoTodo在上一个示例中）。提供HTML标记的组件可以使用标记呈现在页面上{% component %}，如下所示：

{% component 'demoTodo' %}

注意：如果将具有相同名称的两个组件一起分配给页面和布局，则页面组件将覆盖布局组件的所有属性。

组件别名

如果有两个使用相同名称注册组件的插件，则可以通过使用其完全限定的类名称并为其分配别名来附加组件：

[October\Demo\Components\Todo demoTodoAlias]
maxItems = 20

该部分中的第一个参数是类名称，第二个是附加到页面时将使用的组件别名。如果指定了组件别名，则在引用组件时应在页面代码中的所有位置使用它。请注意，下一个示例引用了组件别名：

{% component 'demoTodoAlias' %}

别名还允许您通过使用短名称第一个和别名第二个来在同一页面上定义同一类的多个组件。这使您可以在页面上使用同一组件的多个实例。

[demoTodo todoA]
maxItems = 10
[demoTodo todoB]
maxItems = 20

使用外部属性值

默认情况下，属性值在定义组件的“配置”部分中初始化，并且属性值是静态的，如下所示：

[demoTodo]
maxItems = 20
==
...

但是，有一种方法可以使用从外部参数（URL参数或部分参数（用于在部分中定义的组件））加载的值来初始化属性。对应{{ paramName }}从部分变量加载的值使用语法：

[demoTodo]
maxItems = {{ maxItems }}
==
...

假设在上面的示例中，组件demoTodo是部分定义的，那么它将使用从maxItems部分变量加载的值进行初始化：

{% partial 'my-todo-partial' maxItems='10' %}

要从URL参数加载属性值，请使用{{ :paramName }}语法，其中名称以冒号（:）开头，例如：

[demoTodo]
maxItems = {{ :maxItems }}
==
...

组件所属的页面应具有定义的相应URL参数：

url = "/todo/:maxItems"

在十月的后端中，您可以使用检查器工具将外部值分配给组件属性。在检查器中，您无需使用大括号输入参数名称。检查器中的每个字段在右侧都有一个图标，用于打开外部参数名称编辑器。输入参数名称作为paramName部分变量或:paramNameURL参数。

将变量传递给组件

可以将组件设计为在呈现它们时使用变量，类似于Partial变量，可以在{% component %}标记中的组件名称之后指定它们。指定的变量将显式覆盖组件属性的值，包括外部属性值。

在此示例中，在渲染组件时，组件的maxItems属性将设置为7：

{% component 'demoTodoAlias' maxItems='7' %}

注意：渲染时，并非所有组件都支持传递变量。

自定义默认标记

组件提供的标记通常旨在作为组件的使用示例。在某些情况下，您可能希望修改组件的外观和输出。将默认标记移至主题局部内容适合完全检修组件。覆盖零部件局部零件对于自定义采摘区域很有用。

将默认标记移到部分

每个组件可以具有一个称为default.htm的入口点，该入口点在调用{% component %}标签时呈现，在下面的示例中，我们假定该组件被称为blogPost。

url = "blog/post"

[blogPost]
==
{% component "blogPost" %}

输出将从插件目录components / blogpost / default.htm呈现。您可以从该文件复制所有标记，然后将其直接粘贴到页面中或粘贴到新的部分中，例如，称为blog-post.htm。

{{ __SELF__.post.title }}
{{ __SELF__.post.description }}

在标记内部，您可能会注意到对名为的变量的引用，该变量__SELF__指向组件对象，应替换为页面上使用的组件别名，在本示例中为blogPost。

{{ blogPost.post.title }}
{{ blogPost.post.description }}

这是允许默认组件标记在主题内的任何地方工作所需的唯一更改。现在，可以使用局部主题来自定义和渲染组件标记。

{% partial 'blog-post.htm' %}

可以对组件partial目录中找到的所有其他parts重复此过程。

覆盖组件局部

可以使用主题局部变量覆盖所有组件局部变量。如果一个名为channel的组件使用title.htm部分。

url = "mypage"

[channel]
==
{% component "channel" %}

我们可以通过在主题中创建一个名为partials / channel / title.htm的文件来覆盖partial 。

文件路径段细分如下：

分割	描述
部分	主题局部目录
渠道	组件别名（部分子目录）
title.htm	部分要覆盖的组件

只需为组件分配一个相同名称的别名，就可以将部分子目录名称自定义为任何内容。例如，通过为通道组件分配不同的别名foobar，覆盖目录也会更改：

[channel foobar]
==
{% component "foobar" %}

现在，我们可以通过在主题中创建一个名为partials / foobar / title.htm的文件来覆盖title.htm部分。

“查看包”组件

十月包含一个特殊的组件viewBag，可以在任何页面或布局上使用。它允许在标记区域内轻松地将临时属性定义和访问为变量。一个很好的用法示例是在页面内定义一个活动菜单项：

title = "About"
url = "/about.html"
layout = "default"

[viewBag]
activeMenu = "about"
==

Page content...

然后，使用该viewBag变量可以在页面，布局或部分标记内使用为组件定义的任何属性。例如，在此布局中，如果将值设置为about，则将活动类添加到列表项：viewBag.activeMenu

description = "Default layout"
==
[...]



    About
    [...]

注意：viewBag组件隐藏在后端，仅可用于基于文件的编辑。其他插件也可以使用它来存储数据。