meta-runner
元数据渲染器模块，解析标准元数据渲染出页面
组件
{ name: 'cmp-name', /* 组件的名字，通常用作唯一标示 */ type: 'cmp-type', /* 组件的类型 (Vue.Component | React.Component) */ attributes: { props: {}, /* 自定义属性 */ events: {}, /* 组件的事件 */ slot: '' /* 布局使用 ( Vue的实现, 参见Vue文档 ) */ }, children: [] }
事件流
{ onDeleteEventHandler: { type: 'confim', /* 事件流是由action拼接而成，每一个节点都是一个action的定义 */ pass: true, /* 配置了pass属性为true后，事件流执行时将跳过该action */ params: { text: '确认要删除该条记录吗？' }, promise: { /* promise中定义下一级事件 */ resolve: { /* 上级action中resolve后将直接调用这里定义的resolve */ type: 'deleteItem', params: { userID: BSGlobal.UserID }, promise: { resolve: { type: 'alertOperationSuccess', params: { text: '删除成功' } } } }, reject: { /* 上级action中reject后将直接调用这里定义的reject */ type: 'backToIndexPage' } } } }
- 对于事件流中使用的action, 返回的数据都会被merge进下一个action的parmas参数中
完整的带有事件流的组件
{ name: 'button-unique-name-001', type: 'vue-common-button', attributes: { props: { 'text': '删除按钮' }, slot: 'main', events: { onDeleteEventHandler: { type: 'confim', pass: true, params: { text: '确认要删除该条记录吗？' }, promise: { resolve: { type: 'deleteItem', params: { userID: BSGlobal.UserID }, promise: { resolve: { type: 'alertOperationSuccess', params: { text: '删除成功' } } } }, reject: { type: 'backToIndexPage' } } } }, }, children: [] }
模块的使用
模块返回三个对象
metadataFormat: Function
用来格式话PageBuilder编辑后的元数据到标准元数据结构
metadataUtil: Object
一组用来处理标准元数据的工具类函数, 包括： findCmpByConditions(), getChildren(), getDeepChildren(), findByCmpName(), findCmpsByType(), visitEveryCmp()
install: Function
模块初始化的函数，函数接受一个Object作为传入参数，Object中需要传入两个对象：1. store.dispatch 2. Vuex Usage: install({ 'dispatcher': store.dispatch, 'Vuex': Vuex })
install 函数返回两个对象，包括:
renderComponent: Function，接受标注元数据作为参数，返回Vue组件实例
bindEvents: Function, 该函数一般无需直接调用，在renderComponent内部已经调用了该函数