Asperger Asperger - 2 months ago 9
Javascript Question

Breaking down an audio player into an MVC structure

Imagine an audio player that does 3 main things:

  • Manipulates and creates data (progress length, time conversion, volume calculation etc)

  • Listens to user interactions / inputs and triggers manipulation of data or visibility of gui components

  • Displays and updates gui components on screen.

Where in the MVC would you put which of the above?

I was thinking:
- First is part of the model
- Second the controller
- Third the view

However, im not entirely sure which is why im asking.


Data manipulation and creation should be handled by the model.

The view would be the actual GUI, with all the controls such as play/pause/volume etc. Each control would have events associated with it, such as play_click, pause_click, volume_up etc.

The presenter would have event handlers for these view events. Whenever an event occurs, the associated handler would execute, causing changes in the model and/or view as required.

For example, if the model contains a volume property, and the view raises a volume_up event, the onVolume_up event handler in the presenter will execute, causing the volume property of the model to increment, and also update the view accordingly.

Note that the presenter does not depend on the view. So tomorrow you can change your entire GUI, and you wouldn't have to touch the presenter or the model.

You can set up all of this manually yourself, or use a framework like Knockoutjs.