Question

在这段代码中，我引入了一个非结构化的String，并将其解析为JS对象。我现在需要将它应用到网络表单。

Here is the demo。它显示Parsed / Structured对象层次结构，并提醒目标项的示例。

创建一个可点击的关键项列表（即按钮，图像，标签等
单击列表项，使用值
修改值并保存回对象

有一些警告：

有重复的键。我不知道如何在保持数据完整性的同时使它们独一无二。我无法筑巢。我唯一能想到的就是为他们添加一个唯一的ID
理想情况下，表单将根据对象中的字段动态生成字段。（即'Button'具有宽度，高度，过渡和名称，其中'Label'具有不同的字段集。
有些元素是嵌套的（即'Scroll'有自己的'Buttons'和'Labels'

非常感谢任何帮助。下面的代码确实创建了一个元素列表，但我无法根据我的点击将值加载到表单中。

这是代码

    //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)
        });

    });
});

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

2 个答案: