如何为网页创建复杂的数据绑定 <select>盒子？

Question

I'm building a database query wizard on Google App Engine. For the browser front-end, I need some dynamic data-binding between boxes/menus on the webpage.

Specifically, when SelectBoxA is changed, a bunch of other Selectboxes should be updated (basically menus of attributes from the selected table. schema stored in an array). The thing is there can be an arbitrary number of those depending on how many elements the user adds to their query. Finally, SelectBoxZ should sort of keep track of what elements have been added, so it must be dynamically updated/populated too.

Any solution involving Javascript is ok, or alternatively using interactions with the server (with Ajax or Python or whatever).

I've experimented with Knockout JS, but I can only seem to get a single view model working at a time and I don't think it will handle new elements being added to the page very easily. Also looked at Backbone JS but from the documentation given, I can't figure out how to go about it.

Any advice, solutions or examples of similar projects on the web would be greatly appreciated.

Answer 1

Did you take a look at ProtoRPC ?

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