Backbonejs - Best Approach to making one page web sites/apps - backbone.js

Question

To start off this might not be the right approach and I'm open to other suggestions but please hear me out......
I'm quite new to Backbone JS and was wondering if its possible to use this to build a portfolio/cv site where content would be loaded via AJAX to a container.
To start off simply, i was thinking along the lines of converting my online CV to be more dynamic where sections such as Profile ,Key Technical Skills, Experience and Career History
can someone please offer a few pointers as what the best approach would be?
Would every view need to have a model?

Answer 1

Given the small amount of content, relatively static nature of the data in a CV, and simplicity of what you would need to accomplish, I'm not sure I would recommend using Backbone for this project. It seems that some simple jQuery click event handlers and transition animations would be sufficient to do what you're looking for.
If you're intent on using Backbone is purely for education and learning how to use it, then I would suggest looking for a project that has a more dynamic nature to it's data, with more content to be manipulated.
FWIW, though, you could use Backbone views to help organize your jQuery code for your CV. However, you'll end up writing more code to do this than if you just used jQuery.
For example, if you wanted to show / hide a section when someone clicks on it... here it is in jQuery:
$(function(){
$(".cv-section").click(function(e){
$(e.currentTarget).toggle("fast");
})
});
and here is the same code in Backbone (which uses jQuery for it's DOM manipulation):
CVView = Backbone.View.extend({
events: {
"click .cv-section": "showHide"
},
showHide: function(e){
$(e.currentTarget).toggle("fast");
}
});
$(function(){
var el = $("#cv");
new CVView({
el: el
});
});
These two examples are functionally the same, and they both use jQuery to manipulate the DOM.

Answer 2

Using Backbone might be overkill for your needs if you're just showing different content based upon what the user clicks on.
Backbone benefits data driven websites where users are creating, editing and deleting data.
The core jQuery library should provide the functionality you need. Checkout jQuery's load method.