markdown Magento2 - UI组件：普通视图模型

Posted 2021-05-05

# Magento2 - UI Components: Plain View Model

## Plain Model View

## 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
<?php
/**
 * @var Magento\Framework\View\Element\Template $block
 */
?>

<h2>Plain View Model</h2>

<div class="example" data-bind="scope: 'plainViewModel'">
    <h5 data-bind="text: title"></h5>
    <h5 data-bind="text: config.label"></h5>
    <pre data-bind="text: JSON.stringify(config, null, 2)"></pre>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "plainViewModel": {
                        "component": "Magento_Theme/js/view/plain-view-model",
                        "label": "This is the label"
                    }
                }
            }
        }
    }
</script>
```

Where:
* `"scope: 'plainViewModel'"` is the **component name under** `<script type="text/x-magento-init">`

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

[![VTGDt.png](https://b.imge.to/2019/08/16/VTGDt.png)](https://imge.to/i/VTGDt)

**Note:** It is not required to add the `"label"`, `"extendedProvider"`... and so on under the  `"plainViewModel"` component.