How to bind/unbind an event from Oro Datagrid as ditching to learn Backbone and implementing with jQuery

common.js

// src/Acme/Bundle/AcmeBundle/Resources/public/js/common.js
/*

You need to run the following commands at Symfony root directory to include this file to web/bundles/acme/js:
php app/console assets:install; php app/console assetic:dump

*/
define(['jquery'],
function($) {
    $.fn.extend({
        /**
         * Bind Event for Oro Datagrid
         *
         * @param object events Event List {key1: value1, key2: value2}
         *
         *      list of key (events):
         *
         *          The latest events can be investigated with the following on FireBug:
         *          $('#grid-acme-grid').data('datagrid').collection._events
         *
         *          add
         *          backgrid:edited
         *          backgrid:sort
         *          beforeFetch
         *          beforeReset
         *          change
         *          remove
         *          request
         *          reset
         *          sort
         *          updateState
         *
         *      list of value (switch, bind/unbind):
         *
         *          The value is expected as Boolean.
         *          false: Unbind from the event
         *          true: Bind the event
         *
         * @param Callback func
         */
        acmeBindGridEvents: function(events, func) {
            var self = this;
            function polling() {
                var grid = self.data('datagrid');
                if (grid) {
                    $.each(events, function(key, value) {
                        if (value) {
                            /* @var Backbone.Events grid.collection */
                            grid.collection.on(key, func, 'acme');
                            // console.log('Binded: ' + key);
                        } else {
                            grid.collection.off(key, null, 'acme');
                            // console.log('Unbinded: ' + key);
                        }
                    });
                } else {
                    setTimeout(polling, 100);
                }
            };
            polling();
        },
        /**
         * Bind Refresh Event from Oro Datagrid
         *
         * @param Callback func
         */
        acmeBindRefreshGridEvent: function(func) {
            // this.acmeBindGridEvents({add: true, remove: true}, func);
            this.acmeBindGridEvents({request: true}, func);
        },
        /**
         * Debug Element
         *
         * Usage:
         *
         *      On FireBug or similar tool:
         *      $.fn.acmeDebugElement($('#grid-acme-grid').data('datagrid'));
         *      $.fn.acmeDebugElement($('#grid-acme-grid').data('datagrid'), 'on');
         *
         */
        acmeDebugElement: function(target, name) {
            console.clear();
            for (var prop in target) {
                if (name === undefined) {
                    console.log(prop);
                    console.debug(target[prop]);
                } else {
                    if (prop == name) {
                        console.log(prop);
                        console.debug(target[prop]);
                        break;
                    }
                }
            }
        }
    });
    return $;
});

update.html.twig

{% extends 'OroUIBundle:actions:update.html.twig' %}
{% import 'OroDataGridBundle::macros.html.twig' as dataGrid %}

{# Omitting #}

{% block content_data %}

    {# Your logic #}
    
    {# Render the datagrid with custom CSS class to enable to refer with jQuery #}
    dataGrid.renderGrid(
        'acme-grid',
        {'cssClass': 'inner-grid acme-grid'}
    )

    {# Your logic #}
    
    {{ parent() }}
    
    <script type="text/javascript">
    require([
        'acmemy/js/common',
        'oroui/js/mediator'
    ],
    function($, mediator) {

        'use strict';

        var myGrid = $('.acme-grid');
        
        function refreshTotal() {
            $.get(
                '/api/rest/latest/acme/{{ entity.id }}/total.json',
                function(data) {
                    var result = data.result;
                    $('#total').html(result.total_formatted);
                }
            );
        }
        mediator.on('datagrid:datagrid_create_after', function(grid) {
            myGrid.data('datagrid', grid);
            // Refresh Total when refreshing the Datagrid
            myGrid.acmeBindRefreshGridEvent(refreshTotal);
        });
        refreshTotal();

    });
    </script>
{% endblock content_data %}