Sunday, October 26, 2014

MVC - Separating state from presentation!

The other day I was working on adding logic to the date picker on the main page of my application.



I wanted to add a feature to add days and months to the date picker with a single click.
The first approach I had taken was to directly write a js function in my main js file:

function addDays(numDays) {
// grab date in the date picker
 // add num days to date
// update the date picker date with the newly calculated date using jquery
}

I had a span element with the on click listener hooked on to the addDays method above.
However, in this function, I was mixing logic with presentation. i.e.

  1. Logic where I was doing all of the calculations and 
  2. Updating the date picker value in the same function!


How can I separate this function such that it follows the MVC pattern?
Essentially I have a variable that holds the state of the application:

var appState = {};

In this variable I plan on holding the current value of the Date picker I have defined in my view. It is initiated on document ready to the current date.

I have a separate function (i.e. addDays(numDays) ) that has the job of updating the current date whenever I want to change it.
Finally I have an update view function that updates the view with the appState variable that I have declared earlier!

function addDays(numDays) {
    var selectedDate = appState.currentDate;
    appState.currentDate = selectedDate.addDays(numDays);
    updateView();
    return false;
}

In the updateView method here, Im only concerned with updating the view with the values stored in my appState variable. I can call this function whenever appState is updated.

function updateView() {
    $('#send_date').val(appState.currentDate.toDateInputValue());

    // Other values to update based on the appState variables I want updated.
}

Lesson learned today, separation of concerns! The method I learned today is to use a variable to hold the state of the application and update the view with my updateView() method.

No comments:

Post a Comment