1

I have a technical programming assignment coming up as part of the interview process for a company. I know it's going to be in Vanilla Javascript but I still want to organize my code properly as if I were using a modern MVC framework.

I'd like to implement a rough way of handling Components where I have a template string corresponding to html for a parent component. Nothing fancy like having the template be custom rendered, simply a chunk of html that will be set to a component's innerHTML.

Essentially each Component will have an init() function that looks roughly as follows:

init(props = {}) {
  this.rootElement = document.querySelector('#app');

  // Render component with template
  this.rootElement.innerHTML = this.template;

  // Init children
}

I want to be able to initialize the children but only after I know for sure that the this.rootElement.innerHTML = this.template call as successfully rendered the div's that will be queried with querySelector in the children's init function.

  • 1
    Changing innerHTML isn't asynchronous; the String is parsed, appended to the DOM, and only then does execution continue. Rendering is a separate issue, but irrelevant to your concern. –  Jul 05 '18 at 17:24
  • Rendering is what I care about, I need to make sure that when the children's `init()` is called `querySelector` returns something and hasn't been called before the actual element it's looking for is rendered. –  Jul 05 '18 at 17:27
  • 1
    The element is definitely part of the DOM, and thus `querySelector()` will return the element as expected. *rendering* means *drawing* the browser window based on the DOM, and is irrelevant to your concern. –  Jul 05 '18 at 17:33

0 Answers0