Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#5115 Add ViewModels section to 2.2 dev-guide #5147

Merged
merged 10 commits into from Aug 26, 2019
4 changes: 4 additions & 0 deletions _data/toc/php-developer-guide.yml
Expand Up @@ -252,6 +252,10 @@ pages:
- label: Adapters
url: /extension-dev-guide/adapters.html

- label: View models
include_versions: ["2.2", "2.3"]
url: /extension-dev-guide/view-models.html

- label: Variable Pool
include_versions: ["2.3"]
url: /extension-dev-guide/variable-pool/
Expand Down
1 change: 1 addition & 0 deletions guides/v2.2/extension-dev-guide/module-development.md
Expand Up @@ -21,3 +21,4 @@ Magento 2 is flexible and as a result has varied functionality, so developing a
* [Routing]({{ page.baseurl }}/extension-dev-guide/routing.html)
* [Indexing]({{ page.baseurl }}/extension-dev-guide/indexing.html)
* [Configure a service as a web API]({{ page.baseurl }}/extension-dev-guide/service-contracts/service-to-web-service.html#configure-webapi)
* [ViewModels]({{ page.baseurl }}/extension-dev-guide/view-models.html)
64 changes: 64 additions & 0 deletions guides/v2.2/extension-dev-guide/view-models.md
@@ -0,0 +1,64 @@
---
title: View models
contributor_name: Space 48
diazwatson marked this conversation as resolved.
Show resolved Hide resolved
contributor_link: https://www.space48.com/
group: php-developer-guide
---

A view model is an abstraction of the view exposing public properties and commands. It allows developers to offload features and business logic from block classes into separate classes that are easier to maintain, test, and reuse.

## When to use view models

Use this approach anytime you need to inject functionality into template files and your code does not need to be backwards compatible with Magento 2.1.

{: .bs-callout-info }
View models are available in Magento 2.2 onwards. If your code must be compatible with older versions of Magento, consider adding your logic to blocks. For more information about backward compatibility, see [Backward compatibility]({{ page.baseurl }}/contributor-guide/backward-compatible-development/).

## How to write view models

The following example shows how to add functionality to a core template with custom logic using a view model in the `cart/item/default.phtml` template, which is located in the `Magento/Checkout/view/frontend/layout/checkout_cart_item_renderers.xml` file:

```xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.cart.item.renderers.default">
<arguments>
<argument name="viewModel" xsi:type="object">Vendor\CustomModule\ViewModel\MyClass</argument>
</arguments>
</referenceBlock>
</body>
```

You must implement the right interface in your `viewModel` class (for example `ArgumentInterface`):

```php
namespace Vendor\CustomModule\ViewModel;

class MyClass implements \Magento\Framework\View\Element\Block\ArgumentInterface
{
public function getTitle()
{
return 'Hello World'
{
}
```

Finally, in the `cart/item/default.phtml` template, you can access the public methods of your view model:

```html
<?php

/** @var $viewModel \Vendor\CustomModule\ViewModel\MyClass */

$viewModel = $block->getViewModel();

?>
<h1><?= $block->escapeHtml($viewModel->getTitle()); ?></h1>

```

## Examples of View models in Magento
diazwatson marked this conversation as resolved.
Show resolved Hide resolved

- [Magento_Catalog]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml#L34){:target="_blank"}
This `viewModel` is used to inject breadcrumb JSON with HTML-escaped names into the template file.
1 change: 1 addition & 0 deletions guides/v2.3/extension-dev-guide/view-models.md