优维低代码:Template State 模板状态数据

EASYOPS_youwei · · 1430 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

 

 

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维7年低代码技术研发及运维成果,主要介绍低代码相关的技术原理及架构逻辑,目的是给广大运维人提供一个技术交流与学习的平台。

连载第二十四期

《高级指引:Template State 模板状态数据》

有时候我们希望在模板内进行消费类似 Context 上下文的数据,但又希望这些数据能控制在模板实例的作用域下:数据封装在模板内部、外部不可访问,同时一个模板的多个实例之间的数据互不影响。Template State 模板状态数据正是为了解决这个问题。

# 示例

定义:

customTemplates:
  - name: "tpl-my-awesome-button"
    state:
      # 状态数据,在模板外部可以通过给模板传递属性来初始化状态数据。
      - name: "buttonDisabled"
        # 可以设置默认值,在外部没有传递对应属性时使用。
        value: true
    bricks:
      - brick: "my-button"
        properties:
          # 在模板内部,通过表达式变量 `STATE` 来读取状态数据。
          disabled: "<% STATE.buttonDisabled %>"
      - brick: "my-trigger"
        events:
          click:
            # 在模板内部,通过内置事件处理来更新状态数据。
            action: "state.update"
            args:
              - "buttonDisabled"
              - false

该状态数据作用域为模板实例,因此,同一个模板的多个实例之间的数据是隔离的。另外该状态数据只能用于模板内部,无法用于模板外部,包括模板对外暴露的插槽中加入的外部构件。

在模板外部传递状态数据:

bricks:
  - brick: "tpl-my-awesome-button"
    properties:
      # 设置初始属性
      buttonDisabled: false
      id: "button-a"
  - brick: "my-toggle"
    events:
      click:
        # 动态地给模板设置属性来变更它的状态数据(需要配合 `"track state"` 使用)
        target: "#button-a"
        properties:
          buttonDisabled: true

除上述示例列出的能力外,已支持的其它能力(类比 CTX):

  • 条件判断 if
  • 属性追踪 "track state"
  • 异步数据 resolve(仅限使用在普通编排中的模板。在 useBrick 中使用模板时,该模板不能定义 resolve 的数据)
  • 懒加载 lazy state.load
  • 主动更新 state.refresh
  • 追踪依赖 track

⊙ NOTE

如果该模板用于useBrick中,目前不可以使用 resolve 来定义异步的状态数据。


有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

1430 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传