Strawberry循环渲染技巧：使用sb-mark实现列表与嵌套结构

Strawberry循环渲染技巧：使用sb-mark实现列表与嵌套结构

【免费下载链接】strawberryZero-dependency, build-free framework for the artisanal web.项目地址: https://gitcode.com/gh_mirrors/stra/strawberry

Strawberry是一个零依赖、无需构建的Web框架，专为手工制作的Web项目设计。本文将详细介绍如何使用Strawberry的sb-mark指令实现高效的循环渲染，包括基础列表渲染和复杂的嵌套结构处理，帮助开发者快速掌握这一核心功能。

什么是sb-mark指令？

sb-mark是Strawberry框架的核心指令，主要用于将DOM元素与响应式数据绑定，实现内容的动态更新。它支持三种主要用法：

• 更新元素内容
• 循环渲染数组
• 删除DOM元素

在循环渲染场景中，sb-mark通过特殊的.#语法标记数组项，自动处理列表的创建、更新和删除，极大简化了动态列表的实现流程。

基础列表渲染：一键实现数组展示

简单数组渲染

使用sb-mark="数组名.#"可以快速将数组数据渲染为DOM列表。例如：

<div> <p sb-mark="list.#"></p> </div> <script> const data = sb.init(); data.list = ['草莓', '蓝莓', '树莓']; </script>

Strawberry会自动生成以下HTML：

<div> <p sb-mark="list.0">草莓</p> <p sb-mark="list.1">蓝莓</p> <p sb-mark="list.2">树莓</p> </div>

列表动态更新

sb-mark支持数组的各种操作，包括：

• 修改数组项：data.list[0] = '草莓🍓'
• 新增元素：data.list.push('黑莓')
• 删除元素：data.list.pop()
• 插入元素：data.list.splice(1, 0, '蔓越莓')

所有操作都会实时反映到DOM中，无需手动操作DOM元素。

对象数组渲染：展示复杂数据结构

当需要渲染对象数组时，可以通过嵌套的sb-mark语法访问对象属性：

<div sb-mark="users.#"> <h3 sb-mark="users.#.name"></h3> <p sb-mark="users.#.age"></p> </div> <script> data.users = [ { name: '小明', age: 28 }, { name: '小红', age: 25 } ]; </script>

这种方式可以轻松渲染表格数据、用户列表等复杂结构，每个对象属性都能精准绑定到对应的DOM元素。

嵌套循环：处理多维数组

sb-mark支持通过多个.#实现嵌套循环，非常适合处理矩阵、树形结构等多维数据：

<div sb-mark="matrix.#"> <p sb-mark="matrix.#"> <span sb-mark="matrix.#.#"></span> </p> </div> <script> data.matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; </script>

这段代码会渲染出3行3列的矩阵结构，每个#对应一维数组的索引，实现了多维数据的直观展示。

循环渲染最佳实践

避免直接删除数组元素

删除数组元素时，建议使用splice而非delete：

// 推荐 data.list.splice(0, 1); // 不推荐 delete data.list[0];

清空列表的正确方式

要清空列表，直接赋值空数组比删除更高效：

data.list = []; // 正确方式

结合条件渲染

可以与sb-if指令结合实现条件渲染：

<div sb-mark="list.#"> <p sb-mark="list.#" sb-if="list.#.active"></p> </div>

总结

通过sb-mark指令，Strawberry提供了简洁而强大的循环渲染能力，支持从简单数组到复杂嵌套结构的各种场景。其核心优势在于：

• 零配置：无需额外设置，通过.#语法即可启用循环
• 自动响应：数据变化自动更新DOM，无需手动操作
• 嵌套支持：轻松处理多维数组和对象结构

掌握sb-mark循环渲染技巧，可以让你在Strawberry项目中高效实现动态列表功能，提升开发效率。更多细节可参考官方文档：docs/reactivity/mark.md。

开始尝试使用sb-mark指令，体验零依赖框架带来的极简开发流程吧！🚀

【免费下载链接】strawberryZero-dependency, build-free framework for the artisanal web.项目地址: https://gitcode.com/gh_mirrors/stra/strawberry