快速开始

欢迎使用 Brick Next 文档！本文将向您介绍覆盖 80% 日常场景会用到的 Brick Next 相关概念。

为简单起见，在本页的大多数示例中，我们将使用原生 HTML 元素来构建用户界面。

然而，Brick Next 的全部潜力只有结合使用自定义元素时才能发挥出来。我们提供了一个第一方构件库，包含许多开箱即用的、设计得体的自定义元素。市面上也有许多免费、现成的第三方 web components 库，可以轻松集成到 Brick Next 中。此外，您还可以创建自己的构件库。

构件嵌套

Storyboards 被定义为声明式的结构化数据，由_构件_组成。

信息

在我们的文档中的大多数示例中，我们将使用 YAML 来定义 Storyboards，因为它与 JSON 或其他语言相比，语法更简单，同时更容易阅读。但请记住，它们只是结构化的数据。

在上述示例中，我们定义了一个等同于以下 HTML 结构的页面：

<div>
  <h1>Welcome to my app</h1>
  <button>I'm a button</button>
</div>

事件响应

您可以通过声明事件处理器来响应事件。

brick: button
properties:
  textContent: Click me
events:
  click:
    action: console.log
    args:
    - You clicked me

数据展示

嵌入 JavaScript 表达式 来展示动态数据。

brick: div
properties:
  textContent: <% CTX.user.name %>

注意在我们的文档中，表达式有自己的语法高亮，但其实它们只是字符串。

通常您应该通过定义 context 来管理页面状态，并使用表达式将状态绑定到构件属性。您还可以设置当发生特定事件时更新这些状态，一旦状态更改，绑定的属性将自动更新。

注意我们使用 <%= %> 替代 <% %> 来激活绑定模式。

条件渲染

有两种方式来实现按条件渲染构件。

第一种方式是定义 if 字段：

- if: <% CTX.isAdmin %>
  brick: admin-panel
- if: <% !CTX.isAdmin %>
  brick: user-panel

第二种是使用控制节点 :if。如果您的条件判断很复杂或者有多个构件需要渲染，这种方式更方便。

定义条件字段 dataSource（通常是一个表达式），并定义要渲染的构件列表 children。如果条件满足，那些没有指定 slot 的构件将被渲染，否则 slot 为 else 的构件将被渲染。

brick: ':if'
dataSource: <% FN.check('my', 'complex', 'expression') %>
children:
- brick: admin-panel-a
- brick: admin-panel-b
- brick: user-panel-x
  slot: else
- brick: user-panel-y
  slot: else

列表渲染

您可以使用控制节点 :forEach 来渲染构件列表。

和 :if 节点类似，您需要声明一个 dataSource 和 children。对于列表中的每个元素，children 将被渲染一次。您可以在 children 内部的表达式中使用 ITEM 来访问当前循环的数据项。

模板制作

您可以创建模板来封装部分 UI，并且像其它构件那样复用它们。

模板可以有自己的限定作用域的、和 context 类似的状态数据。这些数据可以是内部的状态，也可以对外暴露作为该模板的属性。

数据获取

您可以将页面数据设置为从远端 HTTP 接口拉取，并将这些状态数据绑定到任意构件的属性。

如果您获取和处理数据的逻辑比较复杂，您还可以创建自己的 provider 构件，这将涉及到专业代码。

下一步

现在，您已经掌握了如何编写 Brick Next storyboard 的基础知识！

请查看教程来将它们付诸实践，使用 Brick Next 构建您的第一个微应用。