From 24f2a2c8bc8a5823ea122d91d69c7c0ba4f4793f Mon Sep 17 00:00:00 2001 From: Raul E Watson Date: Fri, 9 Aug 2019 01:25:51 +0100 Subject: [PATCH 1/6] #5115 Add ViewModels section to 2.2 dev-guide --- .../extension-dev-guide/module-development.md | 1 + .../v2.2/extension-dev-guide/view-models.md | 70 +++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 guides/v2.2/extension-dev-guide/view-models.md diff --git a/guides/v2.2/extension-dev-guide/module-development.md b/guides/v2.2/extension-dev-guide/module-development.md index 41717bb5d6b..1a81e2a0592 100644 --- a/guides/v2.2/extension-dev-guide/module-development.md +++ b/guides/v2.2/extension-dev-guide/module-development.md @@ -23,3 +23,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) diff --git a/guides/v2.2/extension-dev-guide/view-models.md b/guides/v2.2/extension-dev-guide/view-models.md new file mode 100644 index 00000000000..5264e6ecd54 --- /dev/null +++ b/guides/v2.2/extension-dev-guide/view-models.md @@ -0,0 +1,70 @@ +--- +group: php-developer-guide +subgroup: 99_Module Development +title: ViewModels +menu_title: ViewModels +menu_order: 10001 +--- + +## Overview + +The view model is an abstraction of the view exposing public properties and commands. It allows to offload features and +business logic from block classes into separate classes that are easier to maintain, test and reuse. + +## When to use + +Use this approach anytime you need to inject functionality into template files and your code doesn't need to be backwards compatible with Magento 2.1. + +{: .bs-callout-info } +viewModels are available in Magento 2.2 onwards, if your code needs to 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 + +Let us say that we want to add functionality to a core template with custom logic using a ViewModel in the `cart/item/default.phtml` template found in `Magento/Checkout/view/frontend/layout/checkout_cart_item_renderers.xml`: + +```xml + + + + + + Vendor\CustomModule\ViewModel\MyClass + + + +``` + +You would also have to implement the right interface in your viewModel class (i.e. `ArgumentInterface`): + +```php +namespace Vendor\CustomModule\ViewModel; + +class MyClass implements \Magento\Framework\View\Element\Block\ArgumentInterface +{ + + public function getTitle() + { + return 'Hello World' + { +} +``` + +Finally, in `cart/item/default.phtml` template you can access the public methods of your viewModel: + +```html +getViewModel(); + +?> +

escapeHtml($viewModel->getTitle()); ?>

+ +``` + +## Examples of ViewModels in Magento +- [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. + +https://github.com/magento/magento2/blob/0a1a283cd6a0cf4b98a051867f90150c9490fcec/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml#L34 \ No newline at end of file From 8a55a9859d6b7a84f9fd9317f963456ce2534881 Mon Sep 17 00:00:00 2001 From: Donald Booth Date: Thu, 15 Aug 2019 11:36:11 -0500 Subject: [PATCH 2/6] Grammar fixes. --- guides/v2.2/extension-dev-guide/view-models.md | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/guides/v2.2/extension-dev-guide/view-models.md b/guides/v2.2/extension-dev-guide/view-models.md index 5264e6ecd54..78c41704f41 100644 --- a/guides/v2.2/extension-dev-guide/view-models.md +++ b/guides/v2.2/extension-dev-guide/view-models.md @@ -8,19 +8,18 @@ menu_order: 10001 ## Overview -The view model is an abstraction of the view exposing public properties and commands. It allows to offload features and -business logic from block classes into separate classes that are easier to maintain, test and reuse. +A view model is an abstraction of the view exposing public properties and commands. It allows users to offload features and business logic from block classes into separate classes that are easier to maintain, test and reuse. -## When to use +## When to use view models -Use this approach anytime you need to inject functionality into template files and your code doesn't need to be backwards compatible with Magento 2.1. +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 } -viewModels are available in Magento 2.2 onwards, if your code needs to 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/) +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 +## How to write view models -Let us say that we want to add functionality to a core template with custom logic using a ViewModel in the `cart/item/default.phtml` template found in `Magento/Checkout/view/frontend/layout/checkout_cart_item_renderers.xml`: +We want to add functionality to a core template with custom logic using a View Model in the `cart/item/default.phtml` template found in `Magento/Checkout/view/frontend/layout/checkout_cart_item_renderers.xml`: ```xml @@ -34,14 +33,13 @@ Let us say that we want to add functionality to a core template with custom logi ``` -You would also have to implement the right interface in your viewModel class (i.e. `ArgumentInterface`): +You must implement the right interface in your viewModel class (i.e. `ArgumentInterface`): ```php namespace Vendor\CustomModule\ViewModel; class MyClass implements \Magento\Framework\View\Element\Block\ArgumentInterface { - public function getTitle() { return 'Hello World' @@ -67,4 +65,4 @@ $viewModel = $block->getViewModel(); - [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. -https://github.com/magento/magento2/blob/0a1a283cd6a0cf4b98a051867f90150c9490fcec/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml#L34 \ No newline at end of file +https://github.com/magento/magento2/blob/0a1a283cd6a0cf4b98a051867f90150c9490fcec/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml#L34 From ea1db0a5e574bc89cc6ea6d02f2fb0ff98a299d3 Mon Sep 17 00:00:00 2001 From: Raul E Watson Date: Mon, 19 Aug 2019 23:58:46 +0100 Subject: [PATCH 3/6] #5115 delete template url --- guides/v2.2/extension-dev-guide/view-models.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/guides/v2.2/extension-dev-guide/view-models.md b/guides/v2.2/extension-dev-guide/view-models.md index 78c41704f41..61b2f46e1aa 100644 --- a/guides/v2.2/extension-dev-guide/view-models.md +++ b/guides/v2.2/extension-dev-guide/view-models.md @@ -63,6 +63,4 @@ $viewModel = $block->getViewModel(); ## Examples of ViewModels in Magento - [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. - -https://github.com/magento/magento2/blob/0a1a283cd6a0cf4b98a051867f90150c9490fcec/app/code/Magento/Catalog/view/frontend/layout/catalog_product_view.xml#L34 +This viewModel is used to inject breadcrumb json with html escaped names into the template file. \ No newline at end of file From 2e90867bff16c2db1a6af8ae52f07a878c0700bf Mon Sep 17 00:00:00 2001 From: Raul E Watson Date: Sat, 24 Aug 2019 16:44:39 +0100 Subject: [PATCH 4/6] #5115 editorial changes view models --- _data/toc/php-developer-guide.yml | 4 ++++ .../v2.2/extension-dev-guide/view-models.md | 20 ++++++++----------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/_data/toc/php-developer-guide.yml b/_data/toc/php-developer-guide.yml index 2b89bc370c3..4bf5ac549f8 100644 --- a/_data/toc/php-developer-guide.yml +++ b/_data/toc/php-developer-guide.yml @@ -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/ diff --git a/guides/v2.2/extension-dev-guide/view-models.md b/guides/v2.2/extension-dev-guide/view-models.md index 61b2f46e1aa..e26c351d374 100644 --- a/guides/v2.2/extension-dev-guide/view-models.md +++ b/guides/v2.2/extension-dev-guide/view-models.md @@ -1,15 +1,11 @@ --- -group: php-developer-guide -subgroup: 99_Module Development -title: ViewModels -menu_title: ViewModels -menu_order: 10001 ---- - -## Overview +title: View models +contributor_name: Space 48 +contributor_link: https://www.space48.com/ -A view model is an abstraction of the view exposing public properties and commands. It allows users to offload features and business logic from block classes into separate classes that are easier to maintain, test and reuse. +--- +A view model is an abstraction of the view exposing public properties and commands. It allows users 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. @@ -19,7 +15,7 @@ View models are available in Magento 2.2 onwards. If your code must be compatibl ## How to write view models -We want to add functionality to a core template with custom logic using a View Model in the `cart/item/default.phtml` template found in `Magento/Checkout/view/frontend/layout/checkout_cart_item_renderers.xml`: +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 @@ -47,7 +43,7 @@ class MyClass implements \Magento\Framework\View\Element\Block\ArgumentInterface } ``` -Finally, in `cart/item/default.phtml` template you can access the public methods of your viewModel: +Finally, in the `cart/item/default.phtml` template, you can access the public methods of your view model: ```html getViewModel(); ``` -## Examples of ViewModels in Magento +## Examples of View models in Magento - [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. \ No newline at end of file From b09ed1565f8649e26f4d70218fe5c3f3a2ad66be Mon Sep 17 00:00:00 2001 From: Raul E Watson Date: Sat, 24 Aug 2019 18:46:05 +0100 Subject: [PATCH 5/6] #5115 add symlink to 2.3 --- guides/v2.3/extension-dev-guide/view-models.md | 1 + 1 file changed, 1 insertion(+) create mode 120000 guides/v2.3/extension-dev-guide/view-models.md diff --git a/guides/v2.3/extension-dev-guide/view-models.md b/guides/v2.3/extension-dev-guide/view-models.md new file mode 120000 index 00000000000..8a70ac94799 --- /dev/null +++ b/guides/v2.3/extension-dev-guide/view-models.md @@ -0,0 +1 @@ +../../../guides/v2.2/extension-dev-guide/view-models.md \ No newline at end of file From 3bf546b4acdc8e303e117f0d3fd668354182ccf7 Mon Sep 17 00:00:00 2001 From: Raul E Watson Date: Sat, 24 Aug 2019 23:03:04 +0100 Subject: [PATCH 6/6] #5115 more editorial changes --- guides/v2.2/extension-dev-guide/view-models.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/guides/v2.2/extension-dev-guide/view-models.md b/guides/v2.2/extension-dev-guide/view-models.md index e26c351d374..ff36338f0f8 100644 --- a/guides/v2.2/extension-dev-guide/view-models.md +++ b/guides/v2.2/extension-dev-guide/view-models.md @@ -2,10 +2,11 @@ title: View models contributor_name: Space 48 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 users to offload features and business logic from block classes into separate classes that are easier to maintain, test, and reuse. +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. @@ -29,7 +30,7 @@ The following example shows how to add functionality to a core template with cus ``` -You must implement the right interface in your viewModel class (i.e. `ArgumentInterface`): +You must implement the right interface in your `viewModel` class (for example `ArgumentInterface`): ```php namespace Vendor\CustomModule\ViewModel; @@ -58,5 +59,6 @@ $viewModel = $block->getViewModel(); ``` ## Examples of View models in Magento + - [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. \ No newline at end of file +This `viewModel` is used to inject breadcrumb JSON with HTML-escaped names into the template file.