與自動生成的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表單

回答

相關問題