Structr页面中HTML Select组件的数据绑定与关系更新实践

本教程详细介绍了在structr 4.1.2环境下，如何有效地配置html `select`组件以展示数据，并管理实体间的单向及多向关系。文章涵盖了通过structrscript或javascript查询数据填充`select`、利用rest api更新单值关系（如“基于”某个国家），以及处理多值关系（如“曾工作于”多个国家）的方法，旨在提升用户在structr页面中进行数据管理的理解和实践能力。

1. 理解Structr中HTML Select组件的数据绑定

在Structr构建的页面中，HTML select组件是用户与数据交互的重要方式。正确配置select组件以显示有意义的数据，并将其值与后端实体关联是关键。

1.1 使用函数查询填充Select组件

Structr允许通过函数查询（Function Query）动态填充select组件的选项。这可以通过StructrScript或JavaScript实现。

StructrScript方式： 对于简单的实体查询，可以直接使用StructrScript的find()函数。例如，要列出所有“国家”（Country）实体，函数查询应写为：

find('Country')

在这种情况下，由于Repeater默认处于StructrScript环境，无需使用${和}包裹。

JavaScript方式： 如果查询逻辑更为复杂，需要利用JavaScript的强大功能，可以将函数查询包裹在{和}中，并使用$.find()：

{
    return $.find('Country');
}

这两种方式都将返回Country实体的集合，供select组件渲染。

立即学习“前端免费学习笔记（深入）”；

1.2 配置Select选项的显示与值

一旦select组件被数据填充，下一步是确保每个选项（<option>）能正确显示其文本（例如，国家名称）并携带其对应的唯一标识符（ID）作为值。

通常，select组件的value属性应设置为当前迭代对象的id。例如，在遍历Country实体时，将value属性设置为${current.id}或${Country.id}。而选项的显示文本则应设置为实体的某个属性，如${Country.name}。这样，用户看到的是易读的名称，而实际提交到后端的是该实体的唯一ID。

2. 管理实体间的单向关系更新

在Structr中，实体间的关系（如“顾问”isBasedIn“国家”）通常通过存储关联实体的UUID（即id属性）来维护。更新这种单值关系（即一个实体只关联另一个实体）需要通过REST API发送PUT请求。

2.1 通过REST API更新单值关系

当用户在select组件中选择了一个国家，并希望将该国家的ID关联到当前“顾问”的isBasedIn属性时，可以通过JavaScript发起一个PUT请求到Structr的REST端点。

示例：更新顾问的isBasedIn关系

假设我们要更新一个User类型实体的isBasedIn关系，将其关联到某个Country。

稿定在线PS

PS软件网页版

99

查看详情

let domain   = 'www.example.com'; // 替换为你的Structr实例域名或本地地址（如localhost:8082）
let typeName = 'User';            // 要更新的实体类型
let objectId = 'abcdef123';       // 要更新的User实体的UUID
let countryId = '123abcdef';      // 目标Country实体的UUID（从select组件获取）

fetch('http://' + domain + '/structr/rest/' + typeName + '/' + objectId, {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        isBasedIn: countryId // 将目标Country的UUID作为关系属性的值
    })
})
.then(response => response.json())
.then(data => console.log('更新成功:', data))
.catch(error => console.error('更新失败:', error));

注意事项：

• 此方法适用于在Schema中定义为基数（Cardinality）为1的关系（例如，一个顾问只能基于一个国家）。
• fetch请求的body必须是JSON格式，并包含要更新的关系属性及其对应的目标实体UUID。

3. 管理实体间的多向关系更新

如果一个实体可以关联多个其他实体（例如，“顾问”hasWorked多个“国家”），则在Schema中该关系的基数应定义为*。在这种情况下，HTML select组件需要支持多选，并且提交的数据格式也有所不同。

3.1 配置多选Select组件

要允许用户选择多个国家，需要在HTML select组件中添加multiple属性。例如：

<select multiple="multiple" ...>
    <!-- 选项将在此处动态生成 -->
</select>

3.2 通过REST API更新多值关系

当用户选择了多个国家时，需要将这些国家的UUID以数组的形式发送到REST API。

示例：更新顾问的hasWorked关系

假设User实体与Country实体之间存在hasWorked关系，且其基数为*。

let domain   = 'www.example.com';
let typeName = 'User';
let objectId = 'abcdef123';
let countryIds = ['countryId1', 'countryId2', 'countryId3']; // 从多选select组件获取的多个Country UUID数组

fetch('http://' + domain + '/structr/rest/' + typeName + '/' + objectId, {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        hasWorked: countryIds // 将多个目标Country的UUID数组作为关系属性的值
    })
})
.then(response => response.json())
.then(data => console.log('更新成功:', data))
.catch(error => console.error('更新失败:', error));

注意事项：

• body中的关系属性值必须是一个UUID数组。
• 确保Structr Schema中对应关系的基数已正确设置为*，以支持多值关联。

总结

在Structr中有效管理HTML select组件及其关联数据，是构建交互式Web页面的基础。通过掌握以下几点，可以更好地利用Structr进行数据操作：

1. 数据查询： 利用find('EntityName')（StructrScript）或$.find('EntityName')（JavaScript）动态填充select组件。
2. 选项配置： 确保select选项的value属性设置为实体的UUID，而显示文本为用户可读的属性（如name）。
3. 单值关系更新： 对于基数为1的关系，通过REST API（PUT请求）发送目标实体的单个UUID进行更新。
4. 多值关系更新： 对于基数为*的关系，使用HTML select的multiple属性实现多选，并通过REST API（PUT请求）发送目标实体的UUID数组进行更新。

建议查阅Structr官方文档中关于动态内容Repeater和REST API指南的部分，以获取更深入的理解和最佳实践。

以上就是Structr页面中HTML Select组件的数据绑定与关系更新实践的详细内容，更多请关注php中文网其它相关文章！