複雜的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) 
     }); 

    }); 
});​