0

I am building a one page website with a "page-content" area and main navigation links. Clicking the links runs an animation and loads content (and html) into the "page-content" area.

I have a decent understanding of MVC but in the context of the javascriptMVC framework, i am having a little problem designing my application. I will be adding alot of JavaScript (and JavaScript animation) as i go forward so i want to give my site a good foundation.

  • Do i have one model (index) with fixtures containing the data (and html) i want to add?

  • Do i have one controller for the page(index) with actions(animation then data load from fixtures)?

  • How do i point each link to an action?

Basically,how do i conceptually design the page using the javascriptMVC framework?

Improve this question

1 Answer 1

Reset to default
1

I'm actually doing a very similar thing right now for a PhoneGap application I'm building for iPhone. It is a once page javascript application. Here's the basic architecture I'm using:

  1. All page changes are done with normal <a href="/stuff/things/"></a> tags. The href is a "valid" href - "/stuff/things/".

  2. I have an object which maps URL regex's to controllers. So something like /recipes/\d+?/ would capture any url like /recipes/10/, or /recipes/5/ and call the designated controller.

  3. I bind an event to the document which checks for link clicks, and checks the href attribute of the link with my various regexs. If there is a match it initiates a "pagechange".

  4. The pagechange function uses history.pushState() to alter the URL, and then passes a preset data object to a controller. Part of that data object is an anonymous "complete" function which the controller itself will utilize once it's done doing it's thing.

  5. The reason for the passed in "complete" function is often page changes involve asynchronous activity such as querying a database with ajax. It also allows us to keep our "pagechange" behaviors in one section of our code, and the controllers effectively only build out a block of html and append it to the DOM. At which point the controller calls the passed in complete() function and the pagechange function finishes doing it's work.

You can view the entirety of my framework at: http://eatery.decoratelife.net/eatery.js

It's not an "true" MVC. Since I don't really have models or views. The views are handled by merging data objects with HTML template strings similar to Mustache JS, and the models are done through API calls to a remote mongoDB. But I think it's illustrative of a decent way to solve your problem.

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

1 Comment

This is definitely a good simple way to do this but i am trying to use the javascriptMVC framework

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.