L
L
larionov_n2015-10-07 21:13:11
JavaScript
larionov_n, 2015-10-07 21:13:11

How to properly render DOM?

Good day to all. I want to ask a question about Vanilla JS and its application features.
What is the correct way to create JS classes with this._element = REAL DOM ELEMENT attribute?
I will try to explain the issue:
1) The code in the project cannot be changed and there will be no time.
2) The code is written according to the EcmaScript 3 standard.
3) I am not a supporter of Vanilla, but life forces me to. I understand that with templating engines and Backbone - there will be no such problems. But third-party libraries cannot be used.
For example, the FormPostBox prototype has this._element attribute, which is a DOM object created with document.createElement(tagName). There is also a _getHTML method - it does the following: _element.innerHTML = String + String. Let's say for events we write this._element.onclick = function(){ handler }. And if we are not going to render anything inside this HTML - EVERYTHING is OK.
What if we want to add another js prototype class inside this element.
Options
1) As done now. All nested objects are added to the innerHTML of the parent. Also in the class they are created through createElement, filled through innerHTML. Then the parent's _getHTML children method is called in the getHTML method. And the top object is rendered (Get all HTML Parent with children). Accordingly, we lose this._element connection with what actually got into the DOM tree.
What I do not like:

  1. You can't define a handler for an element because by using only innerHTML we are only passing HTML to the parent and we lose this._element's association with the actual DOM object.
  2. In order to hang an event, you need to find a link to the actual DOM object in the uppermost parents, the HTML of which is in the DOM and is associated with the this._element property. And through delegation (e.target) to catch the ascent from child elements.
  3. Each time you need to search the DOM tree for an object to do appendChild , removeClass and any actions with the DOM object.

2) Rewrite everything to hell. Use schema createElement.appendChild(CreateElement) etc. For the topmost parent to render all of its children. Then this._element for each of the children will refer to objects in the DOM. And it will be possible to hang events without problems, no magic with getHTML.
What are your options?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question