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:
developer.mozilla.org/en-US/d...
Support me on Patreon:
/ dcode
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!

[@emeraldpeterolu7289]

I love this Practice #1 - Approach better

[@sanjaygupta-mb7eq]

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

[@slickwilly691]

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

[@jamesblock8384]

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?

[@echoptic775]

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

[@nr7343]

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

[@JalukOne]

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

[@arkadiuszcieplucha5832]

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

[@rawsmoke8148]

Slightly more concise way:
const doc = document.getElementById('app');
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) {
doc.removeChild(doc.children[index])
}
}
const toDo = new addElement(doc)

[@harag9]

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

[@dcode-software]

Thanks! I use const in most cases when referencing a HTML Element because you can't change the value of a constant - which would make sense in that case.
Also as per the ECMAScript2015 specification you should try to avoid 'var' and go with 'let' instead

[@CodeCrafterOffical]

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

[@aceracer1982]

It does not working ,

[@serious6037]

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

[@paulmachong3575]

a return value is required to avoid undefined. In this context, it is not necessary as the idea is just to update the UI

[@Loche747]

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

[@ehrro]

Because it's a function intended to be called only from within the class.

[@paulmachong3575]

@@ehrro I thought making a method static in class makes it accessible outside the class without having to create an instance of the class. Thus, can be accessed outside the class as ListBinding.createListItem(text)