复杂的JS对象填充可点击的列表和表格

Question

在这段代码中，我带入一个没有结构化的字符串，并将其解析为一个JS对象。我现在需要将其应用于Web表单。

Here is the demo。它显示Parsed/Structured对象层次结构并警告一个目标项目的示例。

1. 创建关键项目（即按钮，图像，标签等

2. 点击列表项的可点击列表，填充形式与价值

3. 修改的值并保存回对象

有一些注意事项：

1. 有重复键。我不知道如何让他们独一无二，同时保持数据的完整性。我无法嵌套它们。我唯一能想到的就是给它们添加一个唯一的ID
2. 理想情况下，表单将根据对象中的字段动态生成字段。 （即“按钮”具有宽度，高度，过渡和名称，其中'标签'具有不同的字段集合
3. 某些元素是嵌套的（即“滚动”有它自己的'按钮'和'标签“

任何帮助，将不胜感激。下面的代码并创建元素的列表，但我不能让它根据我点击值加载到一种形式。

这里是代码

//Parse String 
var str = 'View\n{\n Name: View1;\n Image\n {\n  BackgroundImage: Image.gif;\n  Position: 0, 0;\n  Width: 320;\n  Height: 480;\n }\n\n Button\n {\n  BackgroundImage: Button.gif;\n  Transition: View2;\n  Position: 49, 80;\n  Width: 216;\n  Height: 71;\n }\n\n Button\n {\n  BackgroundImage: Button2.gif;\n  Position: 65, 217;\n  Width: 188;\n  Height: 134;\n }\n\n Label\n {\n  Position: 106, 91;\n  Width: 96;\n  Height: 34;\n  Text: "Button";\n  FontSize: 32;\n  Color: 0.12549, 0.298039, 0.364706, 1;\n }\n Scroll\n {\n  Position: 106, 91;\n  Width: 96;\n  Height: 34;\n  Button{\n   BackgroundImage: Button2.gif;\n   Position: 65, 217;\n   Width: 188;\n   Height: 134;\n  }\n  Button{\n   BackgroundImage: Button2.gif;\n   Position: 65, 217;\n   Width: 188;\n  \n  Height: 134;\n  }\n\n }\n\n}'; 

str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object 
str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object 
str = str.replace(/;/g, ","); // swap out semicolons with commas 
str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas 
str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays 
str = str.replace(/"/g, ""); // get rid of all double quotes 
str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"'); // create strings 

$("#parseList").html(str); 

var objStr; 
eval("objStr={" + str + "};"); 

//console.log(objStr.View.Button) 
//alert(objStr.View.Scroll.Button.Width); 
//End Parse String 

$(document).ready(function() { 

    //Build Initial Object LIst 
    var initObjectList = '<div id="prePop">'; 
    $.each(objStr.View, function (k, v) { 
     initObjectList += '<div class="inLineObjects">' + '<div class="key">' + k + '</div>' + '</div>'; 

    }); 
    initObjectList += '</div>'; 
    $('#code').append(initObjectList) 

对象输出示例：

View:{ 
    Name:"View1", 
    Image:{ 
     BackgroundImage:"Image.gif", 
     Position: [0, 0], 
     Width: 320, 
     Height: 480 
    }, 

    Button:{ 
     BackgroundImage:"Button.gif", 
     Transition:"View2", 
     Position: [49, 80], 
     Width: 216, 
     Height: 71 
    }, 

    Button:{ 
     BackgroundImage:"Button2.gif", 
     Position: [65, 217], 
     Width: 188, 
     Height: 134 
    }, 

    Label:{ 
     Position: [106, 91], 
     Width: 96, 
     Height: 34, 
     Text:"Button", 
     FontSize: 32, 
     Color: [0.12549, 0.298039, 0.364706, 1] 
    }, 
    Scroll:{ 
     Position: [106, 91], 
     Width: 96, 
     Height: 34, 
     Button:{ 
      BackgroundImage:"Button2.gif", 
      Position: [65, 217], 
      Width: 188, 
      Height: 134 
     }, 
     Button:{ 
      BackgroundImage:"Button2.gif", 
      Position: [65, 217], 
      Width: 188, 

     Height: 134 
     } 

    } 

} 

Answer 1

如果我理解正确的话，可能是你最好的选择是建立一种形式为每个objStr.View,为您打造它，但保持这种形式隐藏（CSS display:none）。然后，当用户点击一个，你所要做的就是$(thatForm).show()，你就被设置了。

Answer 2

解决方案：http://jsfiddle.net/kHysL/

这里是我的解决方案：

var str = 'View\n{\n Name: View1;\n Image\n {\n  BackgroundImage: Image.gif;\n  Position: 0, 0;\n  Width: 320;\n  Height: 480;\n }\n\n Button\n {\n  BackgroundImage: Button.gif;\n  Transition: View2;\n  Position: 49, 80;\n  Width: 216;\n  Height: 71;\n }\n\n Button\n {\n  BackgroundImage: Button2.gif;\n  Position: 65, 217;\n  Width: 188;\n  Height: 134;\n }\n\n Label\n {\n  Position: 106, 91;\n  Width: 96;\n  Height: 34;\n  Text: "Button";\n  FontSize: 32;\n  Color: 0.12549, 0.298039, 0.364706, 1;\n }\n Scroll\n {\n  Position: 106, 91;\n  Width: 96;\n  Height: 34;\n  Button{\n   BackgroundImage: Button2.gif;\n   Position: 65, 217;\n   Width: 188;\n   Height: 134;\n  }\n  Button{\n   BackgroundImage: Button2.gif;\n   Position: 65, 217;\n   Width: 188;\n  \n  Height: 134;\n  }\n\n }\n\n}'; 

str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object 
str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object 
str = str.replace(/;/g, ","); // swap out semicolons with commas 
str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas 
str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays 
str = str.replace(/"/g, ""); // get rid of all double quotes 
str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"'); // create strings 

$("#parseList").html(str); 

var objStr; 
eval("objStr={" + str + "};"); 

//End Parse String 

$(document).ready(function() { 
    var selected; 
    //Build Initial Object LIst 
    var initObjectList = '<div id="main">'; 
    $.each(objStr.View, function (k, v) { 
     initObjectList += '<div>' + k + '</div>'; 

    }); 
    initObjectList += '</div>'; 
    $('#main').append(initObjectList) 

    $(document).on('click', '#main div div', function() { 
     var index = $('#main div div').index(this); 

     $(this).click(function() { 
      $('#form div').remove(); 
      codeSnippet = ""; 
      x = $('#main div div').toArray(); 
      codeSnippet = (x[index].innerHTML); 
      console.log(codeSnippet); 

      var initObjectDetail = '<div id="form">'; 
      $.each(objStr.View[codeSnippet], function (k, v) { 
       initObjectDetail += '<div>' + k + '</div>' + '<input value=' + v + '>' + '</input>'; 
       console.log(v); 

      }); 
      initObjectList += '</div>'; 
      $('#form').append(initObjectDetail) 
     }); 

    }); 
});​