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

ProgramBox

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

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#javascript #javascript-framework

Вопрос:

У меня есть «большой» объект 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();});

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

1. зависит от того, как выглядит пользовательский интерфейс, верно? и параметры. active: true вероятно, это будет флажок, но какое-то другое свойство, например active: { yes: 1, no: 0, notsure: -1 } , может иметь смысл для радио

Ответ №1:

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

1. Я обновил первоначальный вопрос, приведя пример того, что именно я ищу. На данный момент я думаю , что написание некоторых функций, таких как function createBooleanWidget() and function updateBooleanWidget() , все равно будет быстрее, чем использование knockoutjs.

2. Согласно вашему обновлению: Я знаю, вы сказали, что хотите быстрое и грязное решение, но я действительно чувствую, что вам следует изучить интеграцию knockouts с шаблонами jquery. Я чувствую, что вы могли бы достичь почти именно того, что вы хотите сделать. Как только вы изучите knockout, объем кода, необходимый для выполнения того, что вы хотите сделать, будет тривиальным. Я всегда не решаюсь давать здесь грязные нечистые ответы, поскольку это может работать в «быстром и грязном» смысле, но это не способствует росту сообщества, которое стремится к чистому, масштабируемому и поддерживаемому коду.

3. Немного запоздалый ответ. Я не собирался возвращаться к этому, если / когда я напишу решение. Что касается производственного кода, я согласен. Однако это скрипт Greasemonkey, поэтому проблем с масштабируемостью нет. Заставить фреймворк, такой как knockoutjs, работать в пределах А) одного файла и Б) в изолированной среде Greasemonkey (оставаясь совместимым с Firefox, Opera и Chrome), … вероятно, не так просто. И с какой целью? Все, что я хочу сделать, это предоставить пользователю возможность обновлять переменные JS без изменения значений в источнике с помощью текстового редактора.

Ответ №2:

В итоге я написал свой собственный «фреймворк».

Он «довольно» общий, но несколько интегрирован в остальную часть моего проекта, действительно ограничен в возможностях, а API не очень чистый. Используйте на свой страх и риск 🙂

Исходный код на GitHub. «Фреймворк» — это 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"
    }
},