Pagination in iterator

[MatheoPons]

If you create an iterator inside another iterator. It's close to impossible to setup a simple Pagination Component for the inner iterator.

Example:

{
  "cid": "index",
  "type": "ContainerView",
  "dataType": "object",
  "layout": "block",
  "components": [
    {
      "cid": "local-storage-0",
      "type": "LocalStorageConnector",
      "dataType": "array",
      "key": "data-exemple",
      "defaultValue": "=[\n    {\n        \"name\":\"David\",\n        \"age\":45,\n        \"childrens\":[\n            {\n                \"name\":\"Ben\",\n                \"age\":20\n            },\n            {\n                \"name\":\"Elen\",\n                \"age\":17\n            },\n            {\n                \"name\":\"Benoit\",\n                \"age\":13\n            }\n        ]\n    },\n    {\n        \"name\":\"Samantha\",\n        \"age\":39,\n        \"childrens\":[\n            {\n                \"name\":\"Valentin\",\n                \"age\":14\n            },\n            {\n                \"name\":\"Mauricette\",\n                \"age\":11\n            },\n            {\n                \"name\":\"Mona\",\n                \"age\":6\n            }\n        ]\n    }\n]",
      "eventHandlers": []
    },
    {
      "cid": "iterator-0",
      "type": "IteratorView",
      "dataType": "array",
      "defaultValue": "=[]",
      "body": {
        "cid": "container-0",
        "type": "ContainerView",
        "dataType": "object",
        "layout": "block",
        "components": [
          {
            "cid": "card-0",
            "type": "CardView",
            "title": "",
            "subTitle": "",
            "imgSrc": "",
            "imgPosition": "top",
            "imgWidth": "",
            "imgHeight": "",
            "text": "",
            "headerEnabled": true,
            "header": {
              "cid": "text-1",
              "type": "TextView",
              "dataType": "string",
              "tag": "div",
              "text": "",
              "eventHandlers": [],
              "dataSource": "$parent",
              "field": "name"
            },
            "body": {
              "cid": "container-2",
              "type": "ContainerView",
              "dataType": "array",
              "layout": "block",
              "components": [
                {
                  "cid": "iterator-2",
                  "type": "IteratorView",
                  "dataType": "array",
                  "defaultValue": "=[]",
                  "body": {
                    "cid": "card-2",
                    "type": "CardView",
                    "title": "",
                    "subTitle": "",
                    "imgSrc": "",
                    "imgPosition": "top",
                    "imgWidth": "",
                    "imgHeight": "",
                    "text": "",
                    "header": {},
                    "body": {
                      "cid": "container-3",
                      "type": "ContainerView",
                      "dataType": "object",
                      "layout": "block",
                      "components": [
                        {
                          "cid": "text-4",
                          "type": "TextView",
                          "dataType": "string",
                          "tag": "div",
                          "text": "",
                          "eventHandlers": [],
                          "dataSource": "$parent",
                          "field": "name"
                        }
                      ],
                      "defaultValue": "={}",
                      "eventHandlers": [],
                      "dataSource": "$parent"
                    },
                    "footer": {},
                    "eventHandlers": [],
                    "dataSource": "$parent"
                  },
                  "eventHandlers": [],
                  "dataSource": "$parent",
                  "perPage": "1"
                },
                {
                  "cid": "pagination-1",
                  "type": "PaginationView",
                  "dataSource": "$parent",
                  "eventHandlers": [
                    {
                      "global": false,
                      "name": "@input",
                      "actions": [
                        {
                          "targetId": "iterator-2",
                          "name": "setCurrentPage",
                          "description": "Do Pagination",
                          "argument": "value"
                        },
                        {
                          "targetId": "iterator-0",
                          "name": "update",
                          "description": "Update Iterator",
                          "argument": ""
                        }
                      ]
                    }
                  ],
                  "perPage": "1"
                }
              ],
              "defaultValue": "=[]",
              "eventHandlers": [],
              "dataSource": "$parent",
              "field": "childrens"
            },
            "footer": {},
            "eventHandlers": [],
            "dataSource": "$parent"
          }
        ],
        "defaultValue": "={}",
        "eventHandlers": [],
        "dataSource": "$parent"
      },
      "eventHandlers": [],
      "dataSource": "local-storage-0",
      "perPage": "2"
    }
  ],
  "defaultValue": "={}",
  "eventHandlers": []
}

[renaudpawlak]

It is fixed. Now components can be accessed through their ids within the context of an iterator and it will find the right component (the one within the current iteration). $c('my-component') is contextual to the iterator if $c is invoked from a component within an iterator (same with event targets). On the other hand, if the $c is used outside of an iterator, the behaviour remains unchanged.

This improvement does not imply any change for the user (the API remains unchanged, just the behaviour is enhanced and more consistent).