How to use ViewModels in Magento 2

If we need to get any additional data into the template file generally we've to add or extend the block with its additional dependencies. But since Magento 2.2 we've new functionality like ViewModels. And if we use ViewModel we don’t need to extend the block or add additional dependencies to the block now. It allows developers to offload features and business logic from block classes into separate classes that are easier to maintain, test, and reuse.

In this article, we'll discuss the following things.

1. How to define the ViewModel in Block or Reference Block.
2. How to define ViewModel Class.
3. How to use ViewModel public methods in a template file.

Note: We can use ViewModels in Magento 2.2 and the greater version.

1: Define the ViewModel in Block or Reference Block.

You can define ViewModel in two ways either you can define ViewModel in a new block or you can define with existing block. First, we'll see how to define with the new block.

In the below code MyNewViewModel is the viewmodel class of the Devhooks_HelloWorld module passed as an argument to a block.

saveCopyzoom_out_map
<block name="newviewmodel" template="Devhooks_HelloWorld::example.phtml">
    <arguments>
        <argument name="view_model" xsi:type="object">Devhooks\HelloWorld\ViewModel\MyNewViewModel</argument>
    </arguments>
</block>

In the following example, the same viewmodel is used with an existing block in Magento/Checkout/view/frontend/layout/checkout_cart_item_renderers.xml. You can use any other block as per your requirement.

saveCopyzoom_out_map
<referenceBlock name="checkout.cart.item.renderers.default">
    <arguments>
        <argument name="view_model" xsi:type="object">Devhooks\HelloWorld\ViewModel\MyNewViewModel</argument>
    </arguments>
</referenceBlock>

Here view_model is an argument name that is used for the access viewmodel in a template file. You can access the viewmodel in the following way in a template file.

saveCopyzoom_out_map
$block->getViewModel();
// Or
$block->getData('view_model');

Step 2: Define ViewModel Class

The ViewModel class has to implement the \Magento\Framework\View\Element\Block\ArgumentInterface interface. The interface doesn’t impose implementing any particular methods but it’s required to pass the ViewModel object to the block as an argument.

saveCopyzoom_out_map
namespace Devhooks\HelloWorld\ViewModel;

use Magento\Framework\View\Element\Block\ArgumentInterface;

class MyNewViewModel implements ArgumentInterface
{
    public function getTitle()
    {
      return 'Hello World';
    }
}

Step 3: How to use ViewModel public methods in a template file

With the following way, you can access the ViewModel class and use its public methods in a template(.phtml) file.

saveCopyzoom_out_map
<?php

/** @var $viewModel \Devhooks\HelloWorld\ViewModel\MyNewViewModel */

$viewModel = $block->getViewModel();

?>

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

That's it!!

I hope this article helped you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions on that.

P.S. Do share this article with your team.