Изменить значения объекта JavaScript с помощью автоматически сгенерированной формы HTML

Question

У меня есть «большой» объект JavaScript, который выглядит примерно так:

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

Мне нужна какая-то структура, в которой я передаю переменную (или часть переменной)) и который читает все свойства и создает форму, где они могут быть настроены.Таким образом, флажок будет создан для логического, текстовое поле для строки и т. Д. *

Кто-нибудь знает о такой библиотеке?

Обновление : на данный момент настройкиизменяются, открывая JS и редактируя переменные вручную (JS ​​- локально сохраненный скрипт greasemonkey).Практически все, что на самом деле превосходит это.
Меня не интересует написание (много) кода для двухстороннего связывания, создания всех виджетов пользовательского интерфейса и четкого разделения проблем (MVVM, MVP, ...), которыеэто то, что делает Knockout / Backbone / ... (судя по учебникам).

Вместо :

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);

Теперь пользователь может редактировать элементы формы, а затему нас есть что-то вроде: $("#okButton").click(function() {userConfig = getUpdatedValues();});

Конечно, это выглядит не очень хорошо, но это сделало бы работу довольно быстро / легко.Я предполагаю, что еще нет какой-то общедоступной структуры, которая делает что-то подобное?

Answer 1

Самая близкая вещь, которую я знаю, это knockoutjs. Это делает не совсем то, что вам нужно, но делает механизм сохранения этого объекта в нокаутирующем мире, он будет называться viewModel синхронно с вашей формой, поэтому, если вы обновите содержимое формы, это обновит данные этого объекта. автоматически и наоборот

Answer 2

Я закончил тем, что написал свой собственный «фреймворк».

Это «довольно» универсально, но несколько интегрировано в остальную часть моего проекта, действительно ограничено в возможностях, а API не очень чист. Используйте на свой страх и риск:)

Исходный код на GitHub . 'Framework' - это propui.js, а sangu_config.js - это конфигурация для propui.

Пример вызова API:

backgroundColor: {
    label: "Change the background color",
    propUI: {
        getter: function() { return settings.backgroundColor; },
        setter: function(value) { settings.backgroundColor = value; },
        editor: "bool"
    }
},