Magento 2 custom Model in Component not Working

Question

Ive created a custom component with a template in Magento_Checkout summary :

this is my modal-custom.html:

<div id="modal-content">TEST</div>
<button id="example-modal-button" data-bind="event:{ click: openModal}">
Open modal
</button>

And Here is my js:

define(
    [
        'uiComponent',
        'jquery',
        'Magento_Ui/js/modal/modal',
        'ko'
    ],
    function (Component, $, modal, ko) {
        'use strict';
        var options = {
            autoOpen: true,
            responsive: true,
            clickableOverlay: false,
            modalClass: 'modal-custom',
            title: 'Popup',
            buttons: [{
                text: 'Click Me',
                click: function () {
                    console.log('test')
                }
               }]
            };
        return Component.extend({
            defaults: {
                template: 'Magento_Checkout/view/summary/modal-custom'
            },
            initialize: function (elem) {
                this._super();
                this.startModal();
                return this;
            },
            startModal: function () {
                var ele = $('#modal-content');
                var popup = modal(options, ele); //This is causing the error possibly the ele var;
            },
            openModal: function () {
                $('#modal-content').modal('openModal');
            }

        });
    }
);

It's all fine apart from that when I initialize:

this.startModal();

it Gives Error: Uncaught TypeError: Cannot read property 'nodeName' of undefined

Any helps why it can't find/fire/initialize the modal $('#modal-content')?thanks.

Answer 1

Try using:

        startModal: function () {
            var ele = $('#modal-content');
            var popup = ele.modal(options);
        }

Alternatively you could also get rid of the startModal method and go with:

        openModal: function () {
            $('#modal-content').modal(options).modal('openModal');
        }

Though your startModal is neater.

Answer 2

If you want to just initialize the Modal widget without any additional logic, you can use mageInit bind instead of creating separate model.

For example:

data-bind="{mageInit: {'Magento_Ui/js/modal/modal' : { ..your parameters..}}"

Hope it helps.