xs组件学习（一）

1  todo.json

{
  "name": "todo",
  "version": "0.1",
  "dataModel": {},
  "view": {
    "uuid": "edcc3d80-24fa-11e9-ba3b-9f6ba361f7c6",
    "name": "brz.ui.Section",
    "children": [
      {
        "uuid": "13a19ad8-2520-11e9-b559-e972e0d1dba2",
        "name": "brz.ui.Section",
        "children": [
          {
            "uuid": "f1e34c74-24fa-11e9-ba3b-9f6ba361f7c6",
            "name": "brz.ui.Input",
            "props": [
              {
                "field": "placeholder",
                "value": "test"
              }
            ],
            "bindings": [
              {
                "field": "value",
                "value": "$root.inputValue",
                "twoWay": true
              }
            ],
            "events": []
          },
          {
            "uuid": "14a1f3d9-2520-11e9-b559-e972e0d1dba2",
            "name": "brz.ui.Button",
            "props": [
              {
                "field": "text",
                "value": "ADD"
              }
            ],
            "bindings": [],
            "events": [
              {
                "field": "onClick",
                "value": "86077e50-2520-11e9-9672-d1a5e3166f25"
              }
            ]
          }
        ],
        "props": [
          {
            "field": "style",
            "value": {
              "display": "flex"
            }
          }
        ],
        "bindings": [],
        "events": []
      },
      {
        "uuid": "24292be1-24fb-11e9-ba3b-9f6ba361f7c6",
        "name": "brz.ui.List",
        "props": [
          {
            "field": "header",
            "value": "TODO List:"
          },
          {
            "field": "itemTemplate",
            "value": {
              "uuid": "556f0088-24fb-11e9-ba3b-9f6ba361f7c6",
              "name": "brz.ui.Section",
              "children": [
                {
                  "uuid": "6a056356-24fb-11e9-ba3b-9f6ba361f7c6",
                  "name": "brz.ui.Label",
                  "metaContentKey": "itemTemplate",
                  "bindings": [
                    {
                      "field": "text",
                      "value": "$data.name"
                    }
                  ]
                }
              ]
            }
          }
        ],
        "bindings": [
          {
            "field": "dataSource",
            "value": "$root.dataSource"
          }
        ],
        "events": []
      }
    ]
  },
  "dataModelSchema": {
    "$id": "dataModelSchema",
    "title": "dataModelSchema",
    "definitions": {},
    "type": "object",
    "properties": {
      "inputValue": {
        "$id": "e7773db5-83ab-41ac-9788-f81bc64bfe32",
        "type": "string",
        "title": "inputValue",
        "default": null,
        "extra": {
          "userDefined": true,
          "nodeType": "string",
          "unmodifiable": false,
          "indelible": false
        },
        "definitions": {}
      },
      "dataSource": {
        "$id": "79f1495f-e1b0-47af-8abb-ff5e8dceada2",
        "type": "array",
        "title": "dataSource",
        "default": [],
        "extra": {
          "userDefined": true,
          "nodeType": "array",
          "unmodifiable": false,
          "indelible": false
        },
        "items": {
          "type": "object",
          "extra": {
            "userDefined": true,
            "nodeType": "object",
            "unmodifiable": false,
            "indelible": false
          }
        },
        "definitions": {}
      }
    },
    "extra": {
      "nodeType": "object",
      "userDefined": false,
      "unmodifiable": true,
      "indelible": true
    }
  },
  "actions": [
    {
      "uuid": "673ea250-2520-11e9-9672-d1a5e3166f25",
      "name": "addDataSource",
      "actionType": "MutateDataModel",
      "params": [
        {
          "field": "value",
          "value": ""
        }
      ],
      "bindings": [
        {
          "field": "value",
          "value": "$root.dataSource | concat :[{\"name\": $root.inputValue }]"
        }
      ],
      "success": [
        {
          "field": "$data",
          "value": "$root.dataSource"
        }
      ]
    }
  ],
  "eventHandlers": [
    {
      "uuid": "86077e50-2520-11e9-9672-d1a5e3166f25",
      "name": "addClick",
      "composeType": "pipe",
      "actions": [
        "673ea250-2520-11e9-9672-d1a5e3166f25"
      ]
    }
  ]
}

 

2    布局

3  第二个section区域

 

4 input 标签

5   添加按钮  

6  列表元素

 

7 列表中每个元素的 label

 

8  点击事件  与  action

9   数据模型

10  click模型

11  action模型

 

 

总结： 

1  绘制界面元素

2  添加数据模型

3  添加  click   action  

4   完成

注意事项：

1  list列表中必须有子元素  

 

2   可以将顺序修改为  数据模型  --  界面  -  action   页面中最好不使用中文字样

命令：

  yarn  start

  打开studio开发工具   yarn electronDevWin