Views

About

View — is a replacement for Magento uiComponent. Since uiComponents are not used actively across Magento frontend (except cart and checkout pages), we made a very basic view implementation. In fact, we just added ko.applyBindings on top of Widget Component, and that is everything we need to get most of frontend functionality.

Before we start you’ll need to know about two important View component limitations comparing with uiComponent:

$.view function

$.view — is a complete $.widget analogue:

$.view('name', {});

Please take a look at the Widget page first. Since $.view and View Components have the same abilities as $.widget and Widget Components we will not repeat the same parts, but focus on differences.

Declaration Example

View declaration is identical to Widget:

$.view('viewName', 'parentViewName', {
    component: 'Vendor_Module/js/component',

    defaults: {
        template: 'Vendor_Module/template',
        cart: $.sections.get('cart'),
        isLoading: ko.observable(false),
    },

    create: function () {
        this.cartSubscription = this.cart.subscribe(function (updatedCart) {
            self.isLoading(false);
        });
    },

    destroy: function () {
        this._super();
        this.cartSubscription.dispose();
    }
});

The only difference is how the template property will be processed. View component will replace all slashes / from it with _, and then will ask KnockoutJS to render template with such ID.

Methods

beforeRender

A method called right before the template will be rendered. You can return false to prevent rendering:

beforeRender: function () {
    return false;
}

afterRender

A method called after the template will be rendered.

afterRender: function () {
    // do some awesomeness here
}

Events

contentUpdated

The contentUpdated event is dispatched right after content was rendered.

Please note, that this event is not prefixed with view name.

Usage example:

$(el).on('contentUpdated', function (event) {
    //
});

Rendering html template

Take a look at the View Component example below. If you have worked with uiComponents in Magento previously, you’ll notice that they are very similar:

// Breeze-based view component
$.view('name', {
    defaults: {
        template: 'Vendor_Module/template'
    }
});

// Luma-based uiComponent
Component.extend({
    defaults: {
        template: 'Vendor_Module/template'
    }
});

However, there is a one difference between these two examples. The first one will not work out-of-the box. It will throw the following exception:

Cannot find template with ID Vendor_Module_template

To make it work, you need to render the template manually using breeze_ prefixed layout update. It may be breeze_default.xml to render template across all pages or breeze_catalog_product_view.xml to render template on product page, and so on.

Breeze provides a special block that can render any template from web/template folder. Here is an example of layout update that renders html template:

<referenceContainer name="breeze.container">
    <block class="Swissup\Breeze\Block\HtmlTemplate" name="module.Vendor_Module_template" template="Vendor_Module::template.html"/>
</referenceContainer>