数据域

需要注意，只有少数几个容器组件会创建新的数据域，除了最顶层的 Page，还有 CRUD、Dialog、IFrame、Form、Service 等,这几个组件如果平级就获取不到彼此的数据。 (配置了data后，dialog数据域会继承data中数据)

FormItem类型组件： input-text 、select、 combo、editor等不会创建新的数据域，使用父级数据域。 

这些FormItem组件会有一个store 和 一个formStore。store是上一个有新数据域的组件的store。formStore顾名思义就是上一个form组件的store(可能跨好多级)。

FormItem更新数据时，会调用onChange向上传递，直到遇到Form，就不再传递了。

amis-core/src/renderers/Form.tsx:  只更新自身store数据域，没有调用onChange向上传递

  handleChange(
    value: any,
    name: string,
    submit: boolean,
    changePristine = false
  ) {
    const {store, formLazyChange, persistDataKeys} = this.props;
    if (typeof name !== 'string') {
      return;
    }
    store.changeValue(name, value, changePristine);
    if (!changePristine || typeof value !== 'undefined') {
      (formLazyChange === false ? this.emitChange : this.lazyEmitChange)(
        submit
      );
    }

    if (store.persistData && store.inited) {
      store.setLocalPersistData(persistDataKeys);
    }
  }

amis/src/renderers/Page.tsx: 更新自身store数据域，同时还调用onChange向上传递

  handleChange(
    value: any,
    name: string,
    submit?: boolean,
    changePristine?: boolean
  ) {
    const {store, onChange} = this.props;

    if (typeof name === 'string' && name) {
      //更新store
      store.changeValue(name, value, changePristine);
    }
    //向上派送
    onChange?.apply(null, arguments);
  }

amis/src/renderers/Service.tsx: 更新自身store数据域，同时还调用onChange向上传递

  handleChange(
    value: any,
    name: string,
    submit?: boolean,
    changePristine?: boolean
  ) {
    const {store, formStore, onChange} = this.props;

    // form 触发的 onChange,直接忽略
    if (typeof name !== 'string') {
      return;
    }

    (store as IIRendererStore).changeValue?.(name, value);

    // 如果在form底下，则继续向上派送。
    formStore && onChange?.(value, name, submit, changePristine);
  }

${}模板从数据域中获取数据.

当前组件在遇到获取变量的场景时(数据链)：

1.首先会先尝试在当前组件的数据域中寻找变量，当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，一直寻找，直到顶级节点，也就是page节点，寻找过程结束。

2.此外如果 url 中有参数，还会继续向上查找这层，所以很多时候配置中可以直接 ${id} 取地址栏参数。

创建数据域：

一、显示配置data属性值

需要注意，只有少数几个容器组件会创建新的数据域，除了最顶层的 Page，还有 CRUD、Dialog、IFrame、Form、Service 等。

例如：Service包裹一层，创建新数据域，区分开俩个data

{

"type": "page",

"data": {

        "name": "zhangsan"

},

"body": [

                {

                "type": "tpl",

                "tpl": "my name is ${name}"

                },

                {

                "type": "service",

                "data": {

                        "name": "lisi"

                  },

                "body": {

                        "type": "container",

                        "body": {

                                "type": "tpl",

                                "tpl": "my name is ${name}"

                        }

                }

        }

]

}

data属性中配置表达式${}的话 只能向上取父级数据域的数据。自己组件内的数据取不到。

其他属性里配置表达式。比如： label、api.data配置表达式可以获取到自己的数据域和父级数据域。如下所示：

{

  "type": "form",

  "body": {

      "label": "文本框${da1a}",

      "type": "input-text",

      "name": "text",

    },

  "data": {

    "da1a": "data",

    "da": "${node}", //父级数据域可以

    "test": "${da1a}" //自己组件的不可以

  }

}

二、配置组件初始化接口initApi

并不是所有组件都支持配置初始化接口来实现数据域初始化操作，对于Table、Cards、List等不支持配置初始化接口的组件来说，一般会使用 Service 组件(api)来辅助实现数据域初始化(搭配source处理dict数组数据,非数组数据直接${date}获取即可).

Page、CRUD、Form、Search Box组件都支持initApi属性配置初始化接口,如下：

{  "type": "page",

  "initApi": "/amis/api/initData",

  "body": "Hello ${text}" }

对于不支持initApi属性配置初始化接口的组件，可用service包裹起来并配置api属性实现(搭配source处理dict数组数据,非数组数据直接${date}获取即可)例如service+table：

{

"type": "page",

"body": {

        "type": "service",

        "api": "/amis/api/mock2/crud/table?perPage=5",

        "body": {

                "type": "table",

                "title": "表格1",

                "source": "$rows",

                "columns": [

                        {

                        "name": "engine",

                        "label": "Engine"

                        },

                        {

                        "name": "version",

                        "label": "Version"

                        }

                ]

        }

}

}

api配置的接口返回的数据结构为：

{

  "status": 0,

  "msg": "ok",

  "data": {

    "count": 57,

    "rows": [

      {

        "engine": "Trident",

        "browser": "Internet Explorer 4.0",

        "version": "4",

        "id": 1

      },

      {

        "engine": "Trident",

        "browser": "Internet Explorer 5.0",

        "version": "5",

        "id": 2

      }

]

}

}

Service功能性容器，除了可以辅助实现数据域初始化外，还可以做动态渲染页面内容。

例如：

{

"type": "page",

"body": {

        "type": "service",

        "schemaApi": "/amis/api/mock2/service/schema?type=tabs"

}

}

接口返回的数据结构如下(data返回一个tabs页面的json数据)：

{

  "status": 0,

  "msg": "",

  "data": {

    "type": "tabs",

    "tabs": [

      {

        "title": "TabA",

        "body": "卡片A内容"

      },

      {

        "title": "TabB",

        "body": "卡片B内容"

      }

    ]

  }

}

表达式语法：

表达式获取变量时支持数据链向上取值：

1.首先会先尝试在当前组件的数据域中寻找变量，当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，一直寻找，直到顶级节点，也就是page节点，寻找过程结束。

2.此外如果 url 中有参数，还会继续向上查找这层，所以很多时候配置中可以直接 ${id} 取地址栏参数。

一、旧表达式  xxOn  

可以写js代码,this.xxx获取数据域的数据,(支持数据链向上直到浏览器url)  

 比如："visibleOn": "this.show === 1"   

二、新表达式  ${xxx} 获取数据域的数据,(支持数据链向上直到浏览器url)    

比如： ${result===1 ? '通过' : '未通过'}

1.支持简单的运算表达式 ${a % 2} ${ arr[0].title }

2.支持公式函数 MAX MIN IF 等

3.${window:document.title} 意思是从全局变量中取页面的标题

• window 即全局变量

• ls 即 localStorage， 如果值是 json 对象，可以直接当对象用比如：${ls:xxxxxlocalStrorageKey.xxxx}

• ss 即 sessionStorage，同上

       4.支持过滤器  和 函数

       ${title | isTrue : '${title}' :\"${TIMESTAMP(NOW(),'x')}\"}

   ${IF(true, 'ewqe')  // 不加’’均作为变量处理

5.支持嵌套变量

    ${ name.${test} }     //注意如果${ name.${test}-bb } 会将-作为减法运算法来解析,永远为0

三.JavaScript 模板引擎(主要用在tpl中. )   <span><%= data.result %></span>

{

     "type": "tpl",

    "tpl": "<% if (data.items && data.items.length) { %>Array: <% data.items.forEach(function(item) { %> <span class='label label-default'><%= item %></span> <% }); %><% } %>"

}

获取数据域里数据的方式是<%= data.xxx %>     而不是${xxx}

接口返回格式：

status、msg 和 data 字段为接口返回的必要字段；data必须返回一个具有key-value结构的对象从接口返回的数据中获取(status返回0表示正确返回,否则按错误处理。为了支持多种后端，amis 支持直接返回数据的方式，无需返回 status 和将数据放在 data 字段中)

amis接口按下面格式返回数据：

{

  "status": 0,

  "msg": "",

  "data": {

    "text": "World!"

    ...其他字段

  }

}

兼容直接返回数据的格式,这种方式无法显示错误信息，只能通过返回 http 状态码来标识错误

直接返回数据的字段内不允许有status否则不为0均按错误处理

{

  "username": "amis",

  "email": "amis@amis.com"

}

api请求后端接口：

在api的数据映射(data)属性中可以通过${}获取到input组件的值(通过input标签的name属性绑定)

当变量字段过多的时候，你需要一一映射配置，也许有点麻烦，所以可以使用"&"标识符，来展开所配置变量（"&": "${c}"）

&:$$ 将所有原始数据打平设置到 data 中，只映射本组件数据域。父组件中数据需显示配置上到api.data数据映射中： data:{ "&": "$$", "parentName": "${parent.name}" }

{

"type": "page",

"body": {

        "type": "form",

        "data": {

                "a": "1",

                "b": "2",

                 "c": {

                         "e": "3",

                          "f": "4",

                           "g": "5"

                   }

         },

        "api": {

                "url": "/amis/api/mock2/form/saveForm",

                "method": "post",

                "data": {

                        "name": "${name}",

                        "email": "${email}",

                        "&": "${c}"

                }

        },

        "body": [

                {

                "type": "input-text",

                "name": "name",

                "label": "姓名："

                },

                {

                "name": "email",

                "type": "input-text",

                "label": "邮箱："

                }

        ]

  }

}

requestAdaptor(请求适配器)属性：

api：api 上的配置项，GET请求通过api.query可获取数据映射的参数，POST请求通过api.data可获取到数据映射的参数。api.data/api.query会与url中query参数进行合并,若参数重名api.data优先

adaptor(接受适配器)属性：

payload：当前请求的响应 payload，即 response.data

response：当前请求的原始响应

api：api 上的配置项，GET请求通过api.query可获取数据映射的参数，POST请求通过api.data可获取到数据映射的参数。api.data/api.query会与url中query参数进行合并,若参数重名api.data优先