使用自动生成的 HTML 表单更改 JavaScript 对象值答案

【问题标题】：Change JavaScript object values with auto-generated HTML form使用自动生成的 HTML 表单更改 JavaScript 对象值
【发布时间】：2011-12-03 19:07:43
【问题描述】：

我有一个看起来有点像这样的“大”JavaScript 对象：

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

我正在寻找的是某种框架，我将变量（或变量的一部分）传递给它并读取所有属性并创建一个可以配置这些属性的表单。因此，将为布尔值创建一个复选框，为字符串创建一个文本框等......

有人知道这样的图书馆吗？

更新：目前通过打开JS并手动编辑变量来更改设置（JS是本地存储的greasemonkey脚本）。几乎所有的东西都比这更胜一筹。
我没有兴趣编写（很多）代码来进行双向绑定，创建所有 UI 小部件并干净地分离关注点（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();});

当然，它看起来不太好，但它会很快/很容易地完成工作。我猜还没有一些公共框架可以做这样的事情吗？

【问题讨论】：

取决于用户界面的外观，对吧？和选项。 active: true 可能是一个复选框，但像 active: { yes: 1, no: 0, notsure: -1 } 这样的其他属性可能对收音机有意义

标签： javascript javascript-framework

【解决方案1】：

我所知道的最接近的是 knockoutjs。这并不完全符合您的要求，但它所做的是允许一种机制将该对象保持在淘汰赛世界中，它将被称为与您的表单同步的 viewModel，因此如果您更新表单内容，它将更新该对象的数据自动，反之亦然

【讨论】：

我已经更新了最初的问题，提供了一个我正在寻找的示例。目前我认为写一些像function createBooleanWidget()和function updateBooleanWidget()这样的函数仍然会比使用knockoutjs更快。
根据您的更新：我知道您说过您想要一个快速而肮脏的解决方案，但我真的觉得您应该研究与 jquery 模板的淘汰赛集成。我觉得你几乎可以完全实现你想做的事情。一旦你学会了淘汰赛，做你想做的事所需的代码量将是微不足道的。我总是犹豫在这里给出肮脏的不干净的答案，因为它可能在“快速和肮脏”的意义上工作，但它不会发展一个推动干净、可扩展和可维护的代码的社区。span>
回复有点晚。如果/当我写了一个解决方案时，我不会回到这个问题上。至于生产代码，我同意。但是，这是一个 Greasemonkey 脚本，因此不存在可伸缩性问题。让诸如 knockoutjs 之类的框架在 A) 单个文件和 B) 在 Greasemonkey 沙箱中运行（同时保持与 Firefox、Opera 和 Chrome 兼容）……可能并不那么容易。为了什么目的？我要做的就是让用户能够更新 JS 变量，而无需使用文本编辑器更改源中的值。

【解决方案2】：

我最终编写了自己的“框架”。

它“相当”通用，但在某种程度上集成到我的项目的其余部分中，功能确实有限，API 也不是很干净。使用风险自负:)

The source code on 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"
    }
},

【讨论】：