Backbone? Can.js? Ghetto DIY? How should I work with this data?

I'm working on an application that lets our security dispatchers update a page that contains current road and campus conditions. The backend is a nodejs/express stack with and the data is a simple JSON structure that looks something like this:

{
    "campus": {"condition": "open", "status": "normal"},
    "roads": {"condition": "wet", "status": "alert"},
    "adjacentroads": {"condition": "not applicable", "status": "warning"},
    "transit": {"condition": "on schedule", "status": "normal"},
    "classes": {"condition": "on schedule", "status": "normal"},
    "exams": {"condition": "on schedule", "status": "normal"},

    "announcements" : "The campus is currently under attack by a herd of wild velociraptors. It is recommended that you do not come to campus at this time. Busses are delayed.",

    "sidebar": [
        "<p>Constant traffic updates can be heard on radio station AM1234. Traffic updates also run every 10 minutes on AM5678 and AM901.</p>",
        "<p>This report is also available at <strong>555-555-1234</strong> and will be updated whenever conditions change.</p>"
    ],

    "links": [
        {
            "category": "Transportation Links",
            "links": [
                {
                    "url": "http://www.localtransit.whatever",
                    "text" : "Local Transit Agency"
                },
                {
                    "url": "http://m.localtransit.whatever",
                    "text" : "Local Transit Agency Mobile Site"
                }
            ]
        },
        {
            "category": "Weather Forecasts",
            "links": [
                {
                    "url": "http://weatheroffice.ec.gc.ca/canada_e.",
                    "text" : "Environment Canada"
                },
                {
                    "url": "http://www.theweathernetwork.com",
                    "text" : "The Weather Network"
                }
            ]
        },
        {
            "category": "Campus Notices &amp; Conditions",
            "links": [
                {
                    "url": "http://www.foo.bar/security",
                    "text" : "Security Alerts &amp; Traffic Notices"
                },
                {
                    "url": "http://foo.bar/athletics/whatever",
                    "text" : "Recreation &amp; Athletics Conditions"
                }
            ]
        },
        {
            "category": "Wildlife Links",
            "links": [
                {
                    "url": "http://velociraptors.info",
                    "text" : "Velociraptor Encounters"
                }
            ]
        }

    ],

    "lastupdated": 1333151930179   
}

I'm wondering what the best way of working with this data on the client side would be (e.g. on the page that the dispatchers use to update the data). The page is a mix of selects (the campus, roads, etc conditions), TinyMCE textareas (announcements and sidebar) and text inputs (links). I'm open to changing this data structure if necessary but it seems to me to work well. I've been looking at Backbone, and also Can.JS but I'm not sure if either of those are suitable for this.

Some additional information:

  • there's no need to update an individual item in the data structure separatly; I plan on POSTing the entire structure when it's saved. That said...
  • there's actually two different views, one for the dispatchers and another for their supervisors. The dispatchers only have the ability to change the campus, roads, etc conditions through drop-downs and furthermore can only change the "condition" key; each possible condition has a default status assigned to it. Supervisors can override the default status, and have access to the announcements, sidebar and links keys. Maybe I do need to rethink the previous point about POSTing the whole thing at once?
  • the supervisors need to be able to add and remove links, as well as add and remove entire link categories. This means that DOM elements need to be added and removed, which is why I'm thinking of using something like Backbone or Can.js instead of just writing some ghetto solution that looks at all the form elements and builds the appropriate JSON to POST to the server.

Suggestions welcomed!

CanJS works great with nested data. can.Model is inheriting can.Observe which allows you to listen to any changes in the object structure.

If you include can.Observe.Delegate you have even more powerful event mechanism (example from the docs):

// create an observable
var observe = new can.Observe({
  name : {
    first : "Justin Meyer"
  }
})
  var handler;
//listen to changes on a property
observe.delegate("name.first","set", 
  handler = function(ev, newVal, oldVal, prop){

  this   //-> "Justin"
  ev.currentTarget //-> observe
  newVal //-> "Justin Meyer"
  oldVal //-> "Justin"
  prop   //-> "name.first"
});

// change the property
observe.attr('name.first',"Justin")