使用自动生成的HTML表单更改JavaScript对象值
我有一个“大”JavaScript对象,看起来有点像这样:使用自动生成的HTML表单更改JavaScript对象值,javascript,javascript-framework,Javascript,Javascript Framework,我有一个“大”JavaScript对象,看起来有点像这样: var userConfig = { active: true, subElement: { someProp: 156, otherProp: 'yaye' }, foo: ['bar', 'see', 'no'] // etc } 我要寻找的是某种框架,我将变量(或变量的一部分)传递给它,它读取所有属性并创建一个可以配置这些属性的表单。因此,将为布尔值创建一个
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);
现在,用户可以编辑表单元素,然后我们有如下内容:
$(“#确定按钮”)。单击(函数(){userConfig=getUpdatedValues();})代码>
当然,这看起来不太好,但它可以很快/轻松地完成工作。我猜现在还没有这样的公共框架?我所知道的最接近的东西是knockoutjs。这并不完全符合您的要求,但它所做的是允许一种机制将该对象保持在淘汰世界中它将被称为与表单同步的viewModel,因此如果您更新表单内容,它将自动更新该对象的数据,反之亦然我最终编写了自己的“框架”
它是“相当”通用的,但在某种程度上集成到了我的项目的其余部分,功能非常有限,API也不是很干净。使用风险自担:)
。“框架”是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"
}
},
取决于UI的外观,对吗?以及选择。active:true
可能是一个复选框,但是像active:{yes:1,no:0,notsure:-1}
这样的其他属性对于一个Radio来说可能是有意义的。我已经更新了最初的问题,提供了一个我到底在寻找什么的示例。目前,我认为编写一些函数,如function createBooleanWidget()
和function updateBoleanWidget()
,仍然比使用knockoutjs快。根据您的更新:我知道您说过您想要一个快速而肮脏的解决方案,但我真的觉得您应该研究knockouts与jquery模板的集成。我觉得你几乎可以实现你想做的事情。一旦你学会了敲除,做你想做的事情所需要的代码量将是微不足道的。我总是不愿意在这里给出不干净的答案,因为它可能在“快速和不干净”的意义上工作,但它并没有形成一个推动代码干净、可伸缩和可维护的社区。回复有点晚。如果/当我写了一个解决方案时,我不会再回到这个问题上来。至于生产代码,我同意。但是,这是一个Greasemonkey脚本,因此不存在可伸缩性问题。让knockoutjs这样的框架在a)单个文件中运行,B)在Greasemonkey沙箱中运行(同时保持与Firefox、Opera和Chrome的兼容性)。。。可能没那么容易。为了什么?我想做的就是让用户能够使用文本编辑器更新JS变量,而无需更改源代码中的值。