与自动生成的HTML表单

我有一个“大”更改JavaScript对象值的JavaScript对象，它看起来有点像这样：与自动生成的HTML表单

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

诚然，它看起来并不很漂亮，但它会得到工作完成得相当快/很容易。我猜测现在还没有一些公共框架可以做到这样的事情？

来源

2011-10-09 Laoujin

取决于UI的外观，对不对？和选项。 'active：true'可能是一个复选框，但其他一些属性如'active：{yes：1，no：0，notsure：-1}'可能对收音机有意义 – hunter

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

这是'漂亮'的通用，但稍微集成到我的项目的其余部分，功能非常有限，API不是很干净。请自担风险:)

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

来源

2015-02-11 16:32:23 Laoujin

我知道的最接近的是knockoutjs。这并不是你想要的，但是它的功能是允许一个机制来保持这个对象在knockout世界中，它将被称为viewModel与你的表单同步，所以如果你更新表单内容，它会更新该对象的数据自动，反之亦然

来源

2011-10-09 02:00:35

我已经更新了最初提供的问题我正在寻找什么的例子。此刻，我认为编写一些像函数createBooleanWidget（）和函数updateBooleanWidget（）这样的函数仍然会比使用knockoutjs更快。 – Laoujin

根据你的更新：我知道你说你想要一个快速和肮脏的解决方案，但我真的觉得你应该看看与jQuery模板的knockouts集成。我觉得你几乎可以达到你想要做的。一旦你学会了淘汰赛，做你想做的事情所需要的代码量将变得微不足道。我一直在犹豫不决，因为它可能在“快速和肮脏”的意义上工作，但它不会增长一个推动干净，可扩展和可维护的代码的社区。 –

有点迟到的回复。当我编写解决方案时，我不会回到这个问题上。至于生产代码，我同意。但是，这是一个Greasemonkey脚本，因此没有可伸缩性问题。获得一个框架，例如knockoutjs，以便在A内运行A）单个文件和B）在Greasemonkey沙箱中（同时与Firefox，Opera和Chrome兼容），......可能并不那么容易。为了什么目的？我想要做的就是让用户能够更新JS变量，而无需使用文本编辑器更改源中的值。 – Laoujin

与自动生成的HTML表单

回答

相关问题