Magento 2 custom Model in Component not Working
-
12-01-2021 - |
문제
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.
해결책
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.
다른 팁
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.
제휴하지 않습니다 magento.stackexchange