Elementor’s MVC Pattern: Model and View

In the context of Elementor, it uses a kind of MVC (Model-View-Controller) pattern:

1. Model – Represents the data structure. It’s a representation of an entity (like a control, element, section, etc.), and it holds the data structure and some logic around it. The data here refers to attributes of the control (like label, type, description, etc.).
2. View – Represents the visual representation of the model. In Elementor, this usually maps to a specific UI element (like a button, input field, toggle, etc.). The view is responsible for rendering the control based on its model, handling user interactions, and reflecting any changes back to the model.

getEditorControlModel function

This function fetches the model of a control based on its name:

function getEditorControlModel( controlName ) {
  const editor = elementor.getPanelView().getCurrentPageView();
  return editor.collection.findWhere( { name: controlName } );
}

• Here, elementor.getPanelView().getCurrentPageView() gets you the current page or section being edited in the Elementor editor.
• The editor.collection is a collection (think of it as an array) of all controls present in the current view.
• findWhere({ name: controlName }) searches this collection to find the control with the specified name.

The output you get (with attributes, cid, etc.) is typical of a Backbone.js Model. Elementor relies heavily on Backbone.js, which is a JavaScript library that provides the MVC structure.

getEditorControlView function

This function fetches the view of a control based on its name:

function getEditorControlView( controlName ) {
  const editor = elementor.getPanelView().getCurrentPageView();
  const model = getEditorControlModel( controlName );
  if (model) {
    return editor.children.findByModelCid( model.cid );
  }
  return null;
}

• First, it fetches the model of the control using getEditorControlModel.
• Then, using findByModelCid( model.cid ), it fetches the view associated with this model. The cid is a client ID generated by Backbone.js to uniquely identify models.

The output you get (with $el, el, events, etc.) is typical of a Backbone.js View.

• $el is a jQuery-wrapped element representing the root element of the view.
• el is the raw DOM element.
• model links back to the associated model for this view.
• The rest of the properties and methods are related to the functionalities and behaviors of the view.

In conclusion, the functions are doing exactly what they’re supposed to:

• getEditorControlModel fetches the model of a control.
• getEditorControlView fetches the view of a control.

And the outputs you’re seeing are Backbone.js Model and View instances, which Elementor uses to structure its controls in the editor.