markdown Magento2 - UI组件：可观察的视图模型

Posted 2021-05-05

# Magento2 - UI Components: Observable View Model

## Observable View Model

## 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>Observable View Model</h2>
<div class="example" data-bind="scope: 'obViewModel'">

    <h5 data-bind="text: computedTitle"></h5>
    <button data-bind="click: changeTitle" >change title</button>

    <ul data-bind="foreach: list">
        <li data-bind="text: name"></li>
    </ul>
    <button data-bind="click: listReplace">replace 1st list-data</button>

</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "obViewModel": {
                        "component": "Magento_Theme/js/view/ob-view-model"
                    }
                }
            }
        }
    }
</script>
```

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

## View Model

Create a `ob-view-model.js` file in ../Magento_Theme/web/js/view

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

    return function(config) {
        var viewModel = ko.track({
            title: "This is the observable view model",
            changeTitle: function () {
                this.title = this.title === "This is the observable view model" ?
                "This is the changed title" :
                "This is the observable view model";
            },
            list: [
                {name: "John"},
                {name: "Jane"},
                {name: "George"},
            ],
            listReplace: function() {
                this.list.splice(0, 1, {name: "Replaced Name"});
            },
        });

        viewModel.computedTitle = ko.computed(function () {
            return 'Current Title: ' + this.title;
        }.bind(viewModel));

        return viewModel;
    }
});
```

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



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

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