markdown Magento2 - UI组件：displayArea / getRegion /

Posted 2021-05-05

# Magento2 - UI Components: displayArea/getRegion

## displayArea/getRegion

## Block

**Note:** In this example, we will use:
* theme = ThemeTest
* module = Magento_Theme

_*In this example I used the `default.xml` file to add the block where our UI component will appear._

Under app/design/frontend/[vendorname]/[theme]/[module]/layout/default.xml, let us add the block where the UI component template will appear.
```xml
<block class="Magento\Framework\View\Element\Template" name="magentotheme_basic_ui" template="Magento_Theme::basic-ui.phtml" />  
```
Where:
* **class="Magento\Framework\View\Element\Template"** is the class name used for templated elemens.
* **template="Magento_Theme::basic-ui.phtml"** is the directory where your template is located.
    * ../Magento_Theme/**templates**/basic-ui.phtml

## Template

In ../Magento_Theme/templates/**basic-ui.phtml**, let us create sample code
```html
<h2>Ui Component 2 -- displayArea/getRegion/</h2>
<div class="example" data-bind="scope: 'ui-component'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "ui-component": {
                        "component": "Magento_Theme/js/view/ui-component",
                        "template": "Magento_Theme/ui-component",
                        "children": {
                            "child1": {
                                "displayArea": "groupB",
                                "component": "Magento_Theme/js/view/uiEl-view-model",
                                "template": "Magento_Theme/uiEl-view-model"
                            },
                            "child2": {
                                "displayArea": "groupA",
                                "component": "Magento_Theme/js/view/uiEl-view-model",
                                "template": "Magento_Theme/uiEl-view-model"
                            },
                            "child3": {
                                "displayArea": "groupB",
                                "component": "Magento_Theme/js/view/uiEl-view-model",
                                "template": "Magento_Theme/uiEl-view-model"
                            }
                        }
                    }
                }
            }
        }
    }
</script>
```

Where:
* `"scope: 'ui-component'"` is the **component name** under `<script type="text/x-magento-init">`
* `""component": "Magento_Theme/js/view/ui-component"` is the view model (Javascript file) file
* `"template": "Magento_Theme/ui-component"` is the template (html file) file 
* `"template": "Magento_Theme/uiEl-view-model"` is the template (html file) file

Create a template in ../Magento_Theme/web/template named **ui-component.html**

```html
<h3 text="name"></h3>
<h4 text="label"></h4>
<table>
  <thead>
    <tr>
      <th>name</th>
      <th>qty</th>
      <th>price</th>
      <th>row total</th>
    </tr>
  </thead>
  <tbody>
    <!-- ko foreach: items  -->
    <tr>
      <th text="name"></th>
      <td text="qty"></td>
      <td text="price"></td>
      <td text="$parent.rowTotal($data)"></td>
    </tr>
    <!-- /ko -->
  </tbody>
</table>
<div>Additional charge: <text args="additional_charge"></text></div>
<strong>Total: <text args="total()"></text></strong>



<each args="getRegion('groupA')" render=""/>

<!-- ko foreach: getRegion('groupB') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
```

Create another template in ../Magento_Theme/web/template named **uiEl-view-model.html**

```html
<table style="border:1px solid red;">
    <tr>
        <th>ns</th>
        <td text="ns"></td>
      </tr>
    <tr>
      <th>index</th>
      <td text="index"></td>
    </tr>
    <tr>
      <th>name</th>
      <td text="name"></td>
    </tr>
    <tr if="elems().length">
      <th>Children</th>
      <td>
        <each args="elems">
          <render />
        </each>
      </td>
    </tr>
  </table>
```

## View Model

Create a `ui-component.js` file in ../Magento_Theme/web/js/view

```js
define([
'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            label: 'Observables, using getters and setters',
            additional_charge: 2,
            items: [
                {name: 'Aa', qty: 5, price: 1.5},
                {name: 'Ba', qty: 3, price: 3.0}
            ],
            tracks: {
                label: true,
                additional_charge: true,
                items: true
            }
        },
        //computed value/property
        rowTotal: item => item.qty * item.price,
        total: function () {
            const sum = this.items.map(this.rowTotal)
                .reduce((acc, total) => acc + total);
            
            this.label = this.label + '!';
            return sum + this.additional_charge;
        }
    });
});
```

**Note:** Define dependencies in `define(['uiComponent'], function(...){....});`

#### This is the output of this html code:

[![V1lI6.md.png](https://a.imge.to/2019/08/16/V1lI6.md.png)](https://imge.to/i/V1lI6)