Change JavaScript object values with auto-generated HTML form

Question

I have got a 'big' JavaScript object that looks somewhat like this:

var userConfig =  {   
      active: true,  
      subElement: { someProp: 156, otherProp: 'yaye' },  
      foo: ['bar', 'see', 'no']  
      // etc  
}

What I'm looking for is some sort of framework that I pass the variable (or a part of the variable) to and that reads all properties and creates a form where these can be configured. So a checkbox would be created for a boolean, a textbox for a string etc...

Anyone knows about such a library?

Update: At the moment settings are changed by opening the JS and editting the variables manually (The JS is a locally stored greasemonkey script). Pretty much anything beats that really.
I'm not interested in writing (alot of) code to do two way binding, creating all the UI widgets and having a clean seperation of concerns (MVVM, MVP, ...) which is what Knockout/Backbone/... does (judging from the tutorials).

Instead:

var userConfigUpdater = {
    active: { description: "Activates or deactivates feature X", editType: "boolean"},
    subElement: {
        description: "subElement",
        editType: "tabularItem",
        someProp: {description: "foo", editType: "text"},
        // more
    }
}
createHtmlWidgets(userConfig, userConfigUpdater);

Now the user can edit the form elements and then we have something like: $("#okButton").click(function() {userConfig = getUpdatedValues();});

Granted, it doesn't look very nice, but it would get the job done quite fast/easily. I'm guessing there is not yet some public framework that does something like this?

Answer 1

The closest thing I know is knockoutjs. This doesn't do exactly what you want but what it does do is allow a mechanism for keeping that object in the knockout world it would be called a viewModel in sync with your form so if you update the form contents it would update that object's data automatically and vice-versa