0

I've been working on a system which has a number of MVP components implemented in plain JavaScript. They are instantiated from a main file and have no knowledge of each other which is great so far.

Example classes of a component.

class CompAView {
   constructor(domElemToUse){
      this.presenter = null;
   }
   registerPresenter(presenter) {
      this.presenter = presenter
   }
   // Other functions to setup click listeners and so on...
}

class CompAModel {
   constructor(service){
      this.service = service;
      // data values here
   }
   registerPresenter(presenter) {
      this.presenter = presenter
   }
   // Other functions to setup click listeners and so on...
}

class CompAPresenter {
   constructor(view, model){  ​
     ​this.view = view;
     ​this.model = model;
     this.view.registerPresenter(this);
     this.model.registerPresenter(this);
   }
  ​ // Business logic here...
}

A component then would be instantiated at init time by app.js file

const view = new CompAView($('#compADiv'));
const model = new CompAModel(new BackendService());
new CompAPresenter(view, model);

However at this point we need to create some MVP components which have other component(s) nested. So parent - child relationship. At this point I'm not sure what would be the best way to design such a system.

  1. Instantiating nested components within their parents (ChildView within ParentView and so on...) introduces hard coupling.
  2. Instantiating them outside of parent components sounds about right but ParentView should be providing ChildView with a dom element to render its content.

At this point I feel that this problem must have been solved a hundred of times by different frameworks but I cannot seem to find any abstract enough (or simplified) information on how this pattern should look like. So any ideas would be appreciated!

Thanks in advance!

This site is temporarily in read only mode and not accepting new answers.

Browse other questions tagged .