javascript-mvc-todo-app/

[utterances-bot]

Build a Simple MVC App From Scratch in JavaScript | Tania Rascia

I wanted to write a simple application in plain JavaScript using the model-view-controller architectural pattern. So I did, and here it is…

https://www.taniarascia.com/javascript-mvc-todo-app/

[troflog]

Hello. What type of event design pattern have us used here?

[Dwigth]

Just what i needed, thanks!

[picakciali]

thanks

[dgvirtual]

I am confused about how the changes in the data/model trigger the redraw of the view through the controller - all those "binding" functions blow my fuses... Could you recommend a good resource to read more about the function binding that you use here?

[dnnsjrng]

Thanks for this tutorial. I learned a lot from it. Especially the communication between the 3 classes.

I have one question reg. callbacks/handlers. Why do you call this bindAddTodo(handler) Argument a handler and on the other side bindTodoListchanged(callback) argument a callback? A callback is a function that is passed as an argument to another function and executed later. Isn't the handler a function handleAddTodo from the controller class?

Thanks for your help!

[erfanatp]

Thank you for this article. I'm trying to create an app with this approach. But I have a problem with multiple views and apps. How to remove an app instance and replace it with the other one, by clicking on menu item for example.

[dnnsjrng]

@erfanatp I implemented different views by dynamically add / remove containers in the DOM, to show the requested content for example "Overview", "ListView", "Editor" etc. pp. You just have to add EventListener and then remove the existing and add the requested content.

[ajn404]

tql

[thora-asterix]

This is such a great tutorial for the MVC model, thank you Tania.

[Dylan-Cairns]

This was a fantastic tutorial, thank you!

[DorrKim]

Thank you for your posting. If possible, I would like to translate this article and share it with Korean developers, can I translate it?

[ekomobong-dev]

Thanks

[SerovaN]

Can you please tell me if this problem can be solved?

I would like the words entered in the list to be replaced with links using the replace() method. I've tried changing them with JavaScript + window.onload and jQuery + $(function() and $(document).ready(function() .

Links are being added, but I am not able to add a new entry, as if blocked.

Can you please tell me if there is a way to fix this?

[soli-rsa]

Greetings From South Africa

Thank you for creating such amazing content. I bumped into this today and I've just been stuck here reading (instead of working 🤦🏾‍♂️😅)

[neebs12]

Hi Tania! Thank you for this resource. It has been really helpful! I think in this section: live edit functionality we can do away with _initLocalListeners by scrutinizing the textual content of the target element within the focusout handler.

This refactor of bindEditTodo retains identical functionality while removing _initLocalListeners and this._temporaryTodoText.

bindEditTodo(handler) {
  this.todoList.addEventListener('focusout', event => {
    let txt = event.target.textContent;
    if (txt) {
      let parent = event.target.parentElement;
      handler(+parent.id, txt);
    }
  });
}

[1ucasdev]

Thanks for the detailed information! I'll try to use it for an calculator online with tape. Best wishes!

[tawfikkhaled]

Thank you! A very good starting point to the mvc world.