Javascript MVC - separate logic

Question

I currently use my own setup for an MVC framework in Javascript, but I am a bit confused about the fact, on where I should put my HTML events handlers.

Like click/mouse/focus event and stuff like that, is it acceptable to attach this event-logic into the controller.

Right now, I have it like this:

Some-module.model.js
Some-module.view.js (where I attach my user-events, like mouse events, focus etc)
Some-module.view.tpl (this is where the HTML is being placed between script-tags, mini-templating engine)
Some-module.controller.js

So, is it wisely to attach the click handlers for the view into the controller? or is that bad practise?

I think that is exactly what a view controller class is for, yes. — Thilo
– Thilo, Commented Apr 2, 2012 at 12:59

Greg Franko · Accepted Answer · 2012-04-02 14:34:33Z

2

Putting event handlers inside of a controller class is not bad practice. In fact, the JavaScriptMVC library uses a Controller class to organize all event handlers (although this is not the sole purpose of the Controller class).

Putting event handlers inside of a View class is not bad practice either, as this is used by Backbone.js to organize all event handlers associated with a particular DOM element.

There are plenty of front-end MVC design patterns, and there is not one boilerplate that will fit perfectly for every situation.

answered Apr 2, 2012 at 14:34

Greg Franko

1,77015 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gdoron · Accepted Answer · 2012-04-02 13:00:56Z

0

Save the javascript and all the DOM manipulation in a js file.

Separation of concerns

BTW: Controller is sort of keyword in MVC, you might want to change th js file name, to a name without controller inside of it.

answered Apr 2, 2012 at 13:00

gdoron

151k59 gold badges302 silver badges376 bronze badges

5 Comments

Thilo Over a year ago

But the controller is a JS file ... And how is controlling the interaction with its view not of concern to the controller?

barry Over a year ago

Well I am keeping the 'controller' in the file name, it is pleasant to see what kind of file I am editing while developing. When the site is being deployed, all JS files will be merged automatically. But what do you mean with 'save all DOM manipulations in a JS file' ?

gdoron Over a year ago

@barry. Like $('.foo').addClass('bar').val('a value'); or $('#foo').change(); or $('#foo').hide(); etc'

barry Over a year ago

@gdoron: So DOM manipulations go inside the view part right? And attaching click-events, also inside the view? In that case I have two views, one template and one for attaching user-events and DOM manipulations?

gdoron Over a year ago

@barry. One or two files isn't important. I recommend put it in a js file in the view. Not directly in the view.

barry · Accepted Answer · 2012-04-03 09:33:23Z

Okay thanks all!

What I am going todo:

/controllers/ -> some-module.js

/models/ -> some-module.js (holds data, keep track of states, retreive data)

/views/ -> some-module.js (attaching DOM events, DOM manipulations, will retreive the template TPL file and use it)

/templates/ -> some-module.tpl (the actual view in script-tags, similar to mustache or Jquery Templates, allows me to use variable-tags in the template)

This will keep my application organized and modular.

I could consider handling DOM events inside the controller, but I also need a location to execute some DOM manipulations (changing classnames, changing innerHTML values etc.), and I think that the controller is not the correct way to do that.

Collectives™ on Stack Overflow

Javascript MVC - separate logic

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related