Lightweight frameworks for client-side MVC in javascript?

I'm building a simple client-side survey tool. Users create and edit short surveys and export them as XML (or something similar) when they're done.

I started off using jquery, but realized that it was going to be a headache to map back and forth between the HTML DOM and the underlying XML. It's easy to edit one or the other, but keeping them in sync is a pain.

Anyway, this seems like a standard MVC problem, with a few extra wrinkles:

开发者_运维百科
• I want to do all this work clientside.
• Lightweight is definitely better.

Any thoughts? I looked into backbone, but it seems to be build around REST-ful interactions with a server-side model, which doesn't work well for me. JavascriptMVC looked really bulky for something this small.

Check out AngularJS which states that it brings to HTML what is required to use HTML for JS driven web applications. You can find a simple example of it's usage in form of a showcase of a very simple todo application on the starting page.

you should have a look at KnockoutJS, which is a JavaScript MVVM framework, which lends itself very well to what your doing.

You can use jQuery to turn the xml into JavaScript objects and add a little Knockout model magic and your UI will automatically update itself when the model changes.

You can use Backbone without server sync by creating your custom storage backend providing in-memory persistence

Look at a sample localStorage backend: http://documentcloud.github.com/backbone/docs/backbone-localstorage.html which overrides Backbone's sync method

I know it's not a true "MVC" framework, but you may benefit from checking out the jQuery template plugin - http://api.jquery.com/category/plugins/templates/ . You can create a template (in this case could be the XML template) that you can use to build the output from a JSON object. This would allow you to maintain the data in one place and allow the "rendering" to happen automatically from your data object.

You can use JavaScriptMVC via it's download builder: http://javascriptmvc.com/builder.html. Just check the model, view, controller and you are off! Here's a walkthrough of using just those parts:

http://javascriptmvc.com/docs.html#!mvc