Views: 3928
Last Modified: 07.04.2022
Sometimes, when developing a component, its template must be supplemented with JS functionality, events and other features. It must look approximately as follows:
if (typeof(BX.CrmQuickPanelEdit) === 'undefined')
{
BX.CrmQuickPanelEdit = function(id)
{
this._id = id;
this._settings = {};
this._submitHandler = BX.delegate(this._clickHandler, this);
BX.bind(BX(this._id + '_submit'), 'click', this._submitHandler);
};
BX.CrmQuickPanelEdit.prototype =
{
initialize: function(id, settings)
{
this._id = id;
this._settings = settings;
},
getId: function()
{
return this._id;
},
_clickHandler: function(e)
{
console.log(e);
}
};
BX.CrmQuickPanelEdit.create = function(id, settings)
{
var _self = new BX.CrmQuickPanelEdit(id);
_self.initialize(id, settings);
return _self;
};
}
Similar approaches can be seen in Bitrix Framework JS core (located in /bitrix/js/
). You can get a clearer understanding of Bitrix24 developer JS code after overviewing this example.
Call example:
<script type="text/javascript">
BX.ready(function(){
BX.CrmQuickPanelEdit.create('some_id', null);
});
</script>
The "Single" pattern: you implement it as part of create:
BX.CrmQuickPanelEdit._self = null;
BX.CrmQuickPanelEdit.create = function(id, settings)
{
if (!this._self) {
this._self = new BX.CrmQuickPanelEdit();
}
this._self.initialize(id, settings);
return this._self;
};
JS class actions: memorizes a specific ID (for example, it can be a container ID) and parameter array, as well as associates handler to a confirmation button click event inside the indicated container form.