How to create complex data bindings for web pages <select> box?

Question

I am creating a database query wizard in Google App Engine. For the browser interface, I need a dynamic data binding between blocks / menus on a web page.

In particular, when choosing SelectBoxA, it is necessary to update the group of other Selectboxes (in the main menu of attributes from the selected table, the scheme stored in the array). The fact is that there can be an arbitrary number of those that depend on how many elements the user adds to their request. Finally, SelectBoxZ should track which items were added, so it should be dynamically updated / populated.

Any solution using Javascript is fine or, alternatively, using server interaction (with Ajax or Python or something else).

I experimented with Knockout JS, but it seems to me that only one presentation model works at a time, and I don’t think that it will handle new elements that will be added to the page very easily. I also looked at Backbone JS, but from the documentation I can’t figure out how to do this.

Any advice, solutions or examples of similar projects on the Internet are welcome.

Answer 1

Have you watched ProtoRPC ?

In the post blob declaration, they show how to use it with jQuery.