Almost every rich client web application has one or more lists of objects, and when you do something, one of these objects should change the way it is displayed. Think of the TODO list, which is a canonical example for Backbone.js. Here are some ways to do this:
When making changes, use jQuery or something similar to change the text of the HTML div itself. But what about when you want to save it to the server? Do you read the text of all sections of HTML, making it an authoritative place for data? This is just uncomfortable! And what if you have another state that you don’t want to show to the user? Or if you want to display the same object in two different places?
When you make changes, update a simple Javascript object somewhere, for example window.todos = [{id:1, foo:'bar'},...] . But when you change it, you must redisplay everything that uses this object, and also inform the server about the changes. And if you have two or more different ways to change the state, for example, “mark all completed” function for our TODOs application, then in the end you will repeat a little!
Backbone.js solves this problem by creating a Backbone.Model for each TODO object that contains a valid version of the data. Whenever you change an attribute on a model, no matter where you change it, it notifies all representations of this object for reprocessing. And you can synchronize the entire set of models with a RESTful server with a single function call. Your application will be much more convenient to maintain, and you can easily add arbitrary functions.