# Umbraco 系列 ## 这是什么？集合显示 Umbraco 后台中的实体列表，并内置对多个视图（表、网格）、过滤、分页、选择和批量操作的支持。集合连接到数据存储库，并提供标准化的方式来浏览项目列表并与之交互。 ## 文档在实施之前始终获取最新文档： * **主要文档**： * **集合视图**： * **基础** ： * **扩展注册表**： ## 集合架构一个完整的集合由以下组件组成：收藏/ ├── manifests.ts # 主要集合清单 ├── Constants.ts # 别名常量 ├── types.ts # 项目和过滤器类型 ├── my-collection.context.ts # 集合上下文（扩展 UmbDefaultCollectionContext） ├── my-collection.element.ts # 集合元素（扩展 UmbCollectionDefaultElement） ├── 仓库/ │ ├── 清单.ts │ ├── my-collection.repository.ts # 实现 UmbCollectionRepository │ └── my-collection.data-source.ts # API 调用 ├── 浏览量/ │ ├── 清单.ts │ └── 桌子/ │ └── my-table-view.element.ts # 表格视图 └── 行动/ ├── 清单.ts └── my-action.element.ts # 集合动作 ## 参考示例 Umbraco 源代码包含一个工作示例： **位置**：`/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/collection/` 此示例演示了包含存储库、视图和上下文的完整自定义集合。研究生产模式。 ## 相关基础技能 * **存储库模式**：集合需要存储库来进行数据访问 * 参考技能：`umbraco-repository-pattern` * **Context API** ：用于访问视图中的集合上下文 * 参考技能：`umbraco-context-api` * **状态管理**：用于理解可观察数据和反应数据 * 参考技能：`umbraco-state-management` ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提出问题** \- 什么实体？什么存储库？需要什么意见？有什么动作？ 3. **定义类型** \- 创建item模型和filter模型接口 4. **创建存储库** \-实现数据源和存储库 5. **创建上下文** \- 如果需要自定义行为，则扩展 `UmbDefaultCollectionContext` 6. **创建视图** \- 实现表格/网格视图 7. **创建操作** \- 添加集合操作（创建、刷新等） 8. **解释** \- 显示创建的内容以及如何测试 ## 完整示例 ### 1\.常量（constants.ts）导出 const MY_COLLECTION_ALIAS = 'My.Collection'; 导出常量 MY_COLLECTION_REPOSITORY_ALIAS = 'My.Collection.Repository'; ### 2\.类型（types.ts）导出接口 MyCollectionItemModel { 唯一：字符串；实体类型：字符串；名称：字符串； // 添加其他字段 } 导出接口 MyCollectionFilterModel { 跳过？：数字；取？：数；过滤器？：字符串； orderBy？：字符串； orderDirection？： 'asc' | '描述'； // 添加自定义过滤器 } ### 3\.数据源（存储库/my-collection.data-source.ts）从 '../types.js' 导入类型 { MyCollectionItemModel, MyCollectionFilterModel }; 从 '@umbraco-cms/backoffice/collection' 导入类型 { UmbCollectionDataSource }；从 '@umbraco-cms/backoffice/controller-api' 导入类型 { UmbControllerHost }；导出类 MyCollectionDataSource 实现 UmbCollectionDataSource { #主机：UmbControllerHost；构造函数（主机：UmbControllerHost）{ this.#host = 主机； } 异步 getCollection（过滤器：MyCollectionFilterModel）{ // 在这里调用你的API const 响应 =等待 fetch(`/api/my-items?skip=${filter.skip}&take=${filter.take}`); const data =等待response.json(); const items: MyCollectionItemModel[] = data.items.map((item: any) => ({ 唯一：item.id，实体类型：'我的实体'，名称：项目.名称， })); 返回 { 数据：{ 项目，总计：data.total } }; } } ### 4\.存储库（存储库/my-collection.repository.ts）从 '../types.js' 导入类型 { MyCollectionFilterModel }；从 './my-collection.data-source.js' 导入 { MyCollectionDataSource }；从'@umbraco-cms/backoffice/repository'导入{UmbRepositoryBase}；从 '@umbraco-cms/backoffice/collection' 导入类型 { UmbCollectionRepository }；从 '@umbraco-cms/backoffice/controller-api' 导入类型 { UmbControllerHost }；导出类 MyCollectionRepository 扩展 UmbRepositoryBase 实现 UmbCollectionRepository { #dataSource：MyCollectionDataSource；构造函数（主机：UmbControllerHost）{ 超级（主机）； this.#dataSource = new MyCollectionDataSource(host); } 异步 requestCollection（过滤器：MyCollectionFilterModel）{ 返回这个。#dataSource.getCollection(filter); } } 导出默认的 MyCollectionRepository； ### 5\.存储库清单（repository/manifests.ts）从 '../constants.js' 导入 { MY_COLLECTION_REPOSITORY_ALIAS }；导出 const 清单：Array = [ { 类型：'存储库'，别名：MY_COLLECTION_REPOSITORY_ALIAS， name: '我的收藏库', api: () => import('./my-collection.repository.js'), }, ]; ### 6\.集合上下文（my-collection.context.ts）从 './types.js' 导入类型 { MyCollectionItemModel, MyCollectionFilterModel }; 从 '@umbraco-cms/backoffice/collection' 导入 { UmbDefaultCollectionContext }；从 '@umbraco-cms/backoffice/controller-api' 导入类型 { UmbControllerHost }； // 默认视图别名 - 必须与您的 collectionView 别名之一匹配 const MY_TABLE_VIEW_ALIAS = 'My.CollectionView.Table'; 导出类 MyCollectionContext 扩展 UmbDefaultCollectionContext< 我的集合项目模型，我的集合过滤器模型 > { 构造函数（主机：UmbControllerHost）{ 超级（主机，MY_TABLE_VIEW_ALIAS）； } // 如果需要重写或添加自定义方法 } 导出 { MyCollectionContext as api }; ### 7\.集合元素 (my-collection.element.ts) 从'@umbraco-cms/backoffice/external/lit'导入{customElement}；从 '@umbraco-cms/backoffice/collection' 导入 { UmbCollectionDefaultElement }； @customElement('我的集合') 导出类 MyCollectionElement 扩展 UmbCollectionDefaultElement { // 重写 renderToolbar() 来自定义标题 // 受保护的重写 renderToolbar() { // 返回 html``; // } } 导出默认的 MyCollectionElement；导出 { MyCollectionElement 作为元素 }; 声明全局{ 接口 HTMLElementTagNameMap { '我的集合'：MyCollectionElement； } } ### 8\.表格视图 (views/table/my-table-view.element.ts) 从 '../../types.js' 导入类型 { MyCollectionItemModel } ；从 '@umbraco-cms/backoffice/collection' 导入 { UMB_COLLECTION_CONTEXT }；从 '@umbraco-cms/backoffice/external/lit' 导入 { css, customElement, html, state }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/components' 导入类型 { UmbTableColumn、UmbTableConfig、UmbTableItem }； @customElement('我的表集合视图') 导出类 MyTableCollectionViewElement 扩展 UmbLitElement { @状态（）私有 _tableItems: Array = []; @状态（） private _selection: Array<字符串> = []; #collectionContext？：类型 UMB_COLLECTION_CONTEXT.TYPE；私有_tableConfig：UmbTableConfig = { 允许选择：真， }; 私有_tableColumns：数组 = [ { 名称：'名称'，别名：'名称'，allowSorting：true }， { 名称：''，别名：'entityActions'，对齐：'右' }, ]; 构造函数（）{ 超级（）； this.consumeContext(UMB_COLLECTION_CONTEXT, (上下文) => { this.#collectionContext = 上下文； // 重要提示：调用 setupView 进行工作区模态路由上下文？.setupView(this); this.#observeItems(); this.#observeSelection(); }); } #observeItems() { if (!this.#collectionContext) 返回； this.观察（ this.#collectionContext.items, （项目）=> { this._tableItems = (items as MyCollectionItemModel[]).map((item) => ({ id: item.unique, icon: '图标文档', 实体类型：项目.实体类型，数据：[ { columnAlias: '名称', 值: item.name }, { 列别名：'entityActions', 值：html``, }, ], })); }, '_observeItems', ）； } #observeSelection() { if (!this.#collectionContext) 返回； this.观察（ this.#collectionContext.selection.selection, （选择）=> { this._selection = 选择为 string[]； }, '_observeSelection', ）； } #handleSelect(事件：自定义事件) { event.stopPropagation(); const table = event.target as any； this.#collectionContext?.selection.setSelection(table.selection); } #handleDeselect(事件：自定义事件) { event.stopPropagation(); const table = event.target as any； this.#collectionContext?.selection.setSelection(table.selection); } 覆盖渲染（）{ 返回 html` `; } } 导出默认的 MyTableCollectionViewElement；声明全局{ 接口 HTMLElementTagNameMap { '我的表集合视图'：MyTableCollectionViewElement； } } ### 9\.视图清单 (views/manifests.ts) 从 '../constants.js' 导入 { MY_COLLECTION_ALIAS } ；从 '@umbraco-cms/backoffice/collection' 导入 { UMB_COLLECTION_ALIAS_CONDITION }；导出 const 清单：Array = [ { 类型：'集合视图'，别名： 'My.CollectionView.Table', name: '我的表集合视图', 元素：() => import('./table/my-table-view.element.js'), 重量：200，元：{ 标签：'表'， icon: '图标列表', 路径名：'表'， }, 条件：[ { 别名：UMB_COLLECTION_ALIAS_CONDITION，匹配：MY_COLLECTION_ALIAS， }, ], }, ]; ### 10\.收集操作（action/manifests.ts）从 '../constants.js' 导入 { MY_COLLECTION_ALIAS } ；从 '@umbraco-cms/backoffice/collection' 导入 { UMB_COLLECTION_ALIAS_CONDITION }；导出 const 清单：Array = [ { 类型：'集合动作'，种类：'按钮'，别名： 'My.CollectionAction.Refresh', name: '刷新集合操作', 元素：() => import('./refresh-action.element.js'), 重量：100，元：{ 标签：“刷新”， }, 条件：[ { 别名：UMB_COLLECTION_ALIAS_CONDITION，匹配：MY_COLLECTION_ALIAS， }, ], }, ]; ### 11\.主要集合清单 (manifests.ts) 从'./repository/manifests.js'导入{表现为repositoryManifests}； import { 体现为 viewManifests } from './views/manifests.js'; 从'./action/manifests.js'导入{表现为actionManifests}；从 './constants.js' 导入 { MY_COLLECTION_ALIAS, MY_COLLECTION_REPOSITORY_ALIAS }；导出 const 清单：Array = [ { 类型：'集合'，别名：MY_COLLECTION_ALIAS，名称：“我的收藏”， api: () => import('./my-collection.context.js'), 元素：() => import('./my-collection.element.js'), 元：{ 存储库别名：MY_COLLECTION_REPOSITORY_ALIAS， }, }, ...存储库清单， ...查看清单， ...行动清单， ]; ## 在仪表板中渲染集合从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement }；从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }； @customElement('我的仪表板') 导出类 MyDashboardElement 扩展 UmbLitElement { 覆盖渲染（）{ 返回 html``; } } ## 内置功能收集系统自动提供以下功能：特色|描述 ---|--- **选择** | `context.selection` 上的 `UmbSelectionManager` **分页** | `context.pagination` 上的 `UmbPaginationManager` **加载状态** |可通过“context.loading”观察 **物品** |可通过“context.items”观察 **总数** |可通过 `context.totalItems` 观察 **过滤** |通过 `context.setFilter()` 方法 **视图切换** |使用“UmbCollectionViewManager”的多个视图 ## 关键条件使用“UMB_COLLECTION_ALIAS_CONDITION”来定位您的集合：从 '@umbraco-cms/backoffice/collection' 导入 { UMB_COLLECTION_ALIAS_CONDITION }；条件：[ { 别名：UMB_COLLECTION_ALIAS_CONDITION，匹配：'My.Collection', }, ], 就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

乌布拉科系列

包含技能