Category: M2 Certified Professional Developer Plus

How to create knockoutjs custom binding in Magento 2

Magento 2 uses knockoutjs for rendering UI component. Today I will discuss how you can use existing knockoutjs binding and how you can create a new binding.

What is binding?
Binding or a data binding is a way to link your ViewModels to your Views and vice versa.

What custom bindings are available in knockoutjs?
Magento 2 uses all default knockoutjs bindings and uses some custom bindings too. Most important binding is scope binding. You can read all custom bindings from devdocs. All custom bindings under /vendor/magento/module-ui/view/base/web/js/lib/knockout/bindings

How to use?

Check the scope binding example:

<div class="greet welcome" data-bind="scope: 'customer'">
    <!-- ko if: customer().fullname  -->
    <span class="logged-in" data-bind="text: customer().fullname"></span>
    <!-- /ko -->
</div>
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "customer": {
                    "component": "Magento_Customer/js/view/customer"
                }
            }
        }
    }
}
</script>

Here scope is customer. Where a component is important and this must me extend uiComponent(vendor/magento/module-ui/view/base/web/js/lib/core/element/element.js).

How to create custom bindings?
1. Create app/code/VendorName/ModuleName/view/frontend/web/js/custom-binding.js

define([
    'ko',
    'Magento_Ui/js/lib/knockout/template/renderer'
], function (ko, renderer) {
    'use strict';

    ko.bindingHandlers.customBinding = {

        init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            // This will be called when the binding is first applied to an element
            // Set up any initial state, event handlers, etc. here
            element.innerHTML = 'Custom Binding';
        },
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            // This will be called once when the binding is first applied to an element,
            // and again whenever any observables/computeds that are accessed change
            // Update the DOM element based on the supplied values here.
        }
    };

    renderer
        .addNode('customBinding')
        .addAttribute('customBinding');
});

2. Now you need to register. Create app/code/VendorName/ModuleName/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Ui/js/lib/knockout/bindings/bootstrap': {
                'VendorName_ModuleName/js/lib/knockout/bindings/bootstrap': true
            }
        }
    }
};

3. Create app/code/VendorName/ModuleName/view/frontend/web/js/lib/knockout/bindings/bootstrap.js

define(function (require) {
        'use strict';
        return function (target) {
            target.customBinding = require('VendorName_ModuleName/js/custom-binding');
            return target;
        }
    }
);

Now you can able to use this custom binding. Ex:

<div class="greet welcome" data-bind="scope: 'custom-binding-example'">
    <span data-bind="customBinding:'true'"></span>
</div>
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "custom-binding-example": {
                    "component": "uiComponent"
                }
            }
        }
    }
}
</script>

Pass Magento 2 Certified Professional Developer Plus Exam

It’s been a long time, No new post publish because I was so busy with Magento 2 exams. I have passed 5 Magento 2 certifications. My latest certification was Magento 2 Certified Professional Developer Plus. Today I share my experience and how I prepared Magento 2 Certified Professional Developer Plus exam.

When I took the exam?
I took my Magento 2 Certified Professional Developer Plus exam on 31st December 2018.

How I start preparation?
Magento 2 Certified Professional Developer Plus exam related resource is not available so much. Also, this exam is so young. When Magento announce this exam, I start preparation. My Magento 2 Certified Professional Developer exam preparation help me a lot. I start digging the Magento 2 commerce feature. At this point, Magento 2 Certified Solution Specialist exam preparation helps me to Magento 2 commerce default functionality. I start practicing Staging, Segmentation, RMA, MessageQueue, Database Sharding, etc. feature. I digging how a feature works by coding.

Firstly I find out that area, which I am weak. Then I start that area. It was so much dedication because after full-time work, taking preparation is not easy. But I did that.

Who can take the exam?
Anyone who have 2 years working experience with Magento 2 commerce. Actually, you need hands-on experience with it. This exam is built on Magento 2 commerce only. So it is necessary to work with Magento 2 commerce and Magento 2 commerce knowledge.

How hard this exam compared to other exams, especially professional?
Well, I would say this is hard more than all exam. I see many great Magento developer fail their first attempt. You need so deep knowledge about Magento 2 commerce. So before taking exam you must revise all area (according to study guide) deeply.

How deep we need to study?
Well, it is sooo deep 😀 . For example: for a console command, you need to learn in detail. How you declare in di.xml which area you need to declare (global or frontend, or adminhtml) that, how you declare required/optional option, what is the common error and how to fix that, how to interact with commerce feature, etc. Same for all. It is must check how to interact with Magento 2 commerce which features that is common for community edition.

What is the passing score?

  • 60 multiple choice questions
  • 90 minutes to complete the exam
  • 62% or higher needed to pass

For more details check official site

Where can I find good resource?
Still devdocs is good resource that I have found. Also check every topic from study guide. Also follow my blog 😀 , I have a plan to discuss important topic one by one. Read use guide for default feature.

One important feature I have found for this exam is Security. This feature should include for Professional exam too. Security is so important when you build something for the merchant. So you must know how Magento 2 handle this stuff.

Feel free to reach me if you have any question regarding certification. I am active in Magento Slack, Magento StackExchange or through my blog.