Question

我正在构建一个动态表单来编辑json对象中的数据。首先，如果存在这样的事情让我知道。我宁愿不构建它，但我已经多次搜索一个工具，并且发现只有树状结构需要输入引号。我很乐意将所有值视为字符串。此编辑功能适用于最终用户，因此它非常简单，不会令人生畏。

到目前为止，我有代码生成嵌套表来表示json对象。对于每个值，我显示一个表单域。我想将表单字段绑定到关联的嵌套json值。如果我可以存储对json值的引用，我将构建一个对json对象树中每个值的引用数组。我还没有找到一种方法来使用javascript。

我的最后一种方法是在编辑完成后遍历表格。我宁愿拥有动态更新，但单个提交会比没有更好。

有什么想法吗？

// the json in files nests only a few levels. Here is the format of a simple case,
{
 "researcherid_id":{
  "id_key":"researcherid_id",
  "description":"Use to retrieve bibliometric data",
  "url_template" :[
    {
      "name": "Author Detail",
      "url": "http://www.researcherid.com/rid/${key}"
    }
  ]         
 }
}

$.get('file.json',make_json_form);

function make_json_form(response) {

   dataset = $.secureEvalJSON(response);
   // iterate through the object and generate form field for string values.

}

// Then after the form is edited I want to display the raw updated json (then I want to save it but that is for another thread)

// now I iterate through the form and construct the json object
// I would rather have the dataset object var updated on focus out after each edit.

function show_json(form_id){
 var r = {};
 var el = document.getElementById(form_id);
 table_to_json(r,el,null);
 $('body').html(formattedJSON(r));
}

Answer 1

一种更简单的方法是接受表单提交并以JSON格式输出数据。这样，就不需要绑定变量了。

Answer 2

解决方案已经到来。 JQuery现在有用于数据绑定和模板的插件。

http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html http://api.jquery.com/jQuery.template/ http://api.jquery.com/category/plugins/data-link/

Answer 3

还有另一个简单的模板引擎可以将JSON数据直接加载到表单中。请参阅http://plugins.jquery.com/project/loadJSON插件。它的工作方式与Jack放在这里的方式类似，但它使用纯HTML作为模板。

您可以在http://code.google.com/p/jquery-load-json/wiki/WorkingWithFormElements上的http://jquery-load-json.googlecode.com/svn/trunk/edit.html?ID=17和实例上看到有关如何使用它的说明。

将嵌套的json对象值绑定到表单字段

3 个答案: