JavaScript Classes in Practice #1 - Creating a HTML Binding

After doing a few videos covering class concepts I thought it might be time for using classes in practice! I'd like to demonstrate how you can use a JavaScript class in order to create a direct binding to an HTML element.

In this video we define a JavaScript class that has the appropriate instance properties and methods to directly manipulate a standard HTML list (UL or OL). We create the HTML element, give it an ID and then simply pass it into the constructor for our custom designed class. From there we can add and remove entries (list items) to and from the list.

This can be very useful when developing custom user interfaces for your next web project as it allows you to seamlessly integrate with the UI from the application logic.

For your reference, check this out:

Support me on Patreon:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[emeraldpeterolu]

I love this Practice #1 - Approach better

[sanjaygupta-mbeq]

Thanks Man, I was exactly looking for the same help.

[echoptic]

Why on update method u coudnt just set myList=[]?

[nr]

Why you render all list every action? you can just append li.. or update specify some id

[slickwilly]

I'm trying to impliment this using ES6 modules and webpack and keep getting the message that my new class is not defined even though it clearly is.. Have almost directly copied pasted. long night

[JalukOne]

thanks bro I started working a week ago and the company where I work uses js vanillas spa.

[jamesblock]

That's pretty cool. I could see this being pretty useful in working with the HTML5 canvas element in a way that is more object orientated. Can you give some pointers on how you would go about doing so?

[arkadiuszcieplucha]

Are there any benefits to use update method every time when we want bind to HTML instead of define setter?

[harag]

Nice tutorial, thanks. but why do you use const instead of var for the variables?

[Loche]

Beautiful ! But why is the 'createListItem' method a static method?

[serious]

Can you pls tell, why is undefined showing in your console?

[rawsmoke]

Slightly more concise way:

const doc =

class addElement {
constructor(element) {
this.doc = element
this.textList = []
}

add(text) {
const newList = document.createElement('li');
newList.textContent = text;
this.textList.push(text)
doc.appendChild(newList)
}

remove(index) {

}

}

const toDo = new addElement(doc)

[CodeCrafterOffical]

What is the advantage of putting the whole code in one class?