CODEWITHSUNDEEP
javascriptuser-interfacebackbone.js
kr1zmo
kr1zmo

Reputation: 837

Javascript MVC, need help with structure/methods?

I am attempting a single page application. I understand the main concept of how mvc is used to some extent and am using a lightweight framework called backbone.js. My issue however is not with backbone. I actually am having a problem figuring out how to structure my user interface. I have a bar at the top of the page with 4 buttons. Each button opens an instance window within the application. Within Each of these instance windows html, css, javascript will be utilized. Any suggestions on how to structure the core concept of this user interface.

Considerations on my part:

  1. Each window instance has it's own div with a unique ID (display: none).

  2. On-load, the application should already have necessary html, css, and javascript loaded into dom. The html should be inside each unique div pertaining to its instance window.

  3. Each menu button should modify its divs display: to block, bringing the instance window for that button to front, but hiding all others.

  4. Each instance window has to be flexible enough to run javascript within it, so I must be able to create additional mvc's within each unique div.

  5. Okay, last comment. Should my user interface utilize mvc or is it not neccessary. Also, If it did use mvc whats the best way to acomplish this. There many different concepts with mvc, like creating a view for each instance window and listening for clicks. It just gets confusing.

You think any of my considerations will effectively get the job done, and can you offer suggestions?

Upvotes: 0

Views: 227

Answers (2)

0x6A75616E
0x6A75616E

Reputation: 4716

Although Sencha's ExtJS may not be for you, they have a very detailed tutorial of how they've structured the framework for MVC.

I'd recommend taking a look at this for some ideas: http://dev.sencha.com/deploy/ext-4.0-beta3/docs/guide/application_architecture.html

Cheers!

Upvotes: 1

James Allen
James Allen

Reputation: 819

If I understand correctly, you want to have each button display a popup window, and be able to change the content of each popup window based on some action? I can only speak for how I would use ASP.NET MVC...

I would use jQuery UI Dialog to handle the popup windows, and have a form tag within each popup that uses its own MVC controller using ajax (I prefer the jQuery ajax command). Using ajax rather than a standard submit button allows you to send/receive data to/from the server without refreshing the webpage. You'll need the .serialize to convert your form into the correct format for sending. Each controller action can either return a JsonResult (which gives you back a javascript object you can use) or a PartialView (which gives HTML)...

Hope some of that made sense...

EDIT: To answer your last point, I would have a model, view and controller for each window... but I am fairly new to the MVC pattern...

Upvotes: 1

Related Questions