从Javascript对象循环动态创建的表单.如何将数据保存回对象

Form created dynamically from Javascript Object loop. How to save data back to object

本文关键字：对象 数据 保存 循环 Javascript 动态 创建 表单      更新时间：2023-09-26

我有以下代码，接受字符串并将其修改为对象。然后，我创建一个项目列表，当用户单击列表中的一个项目时，它将创建一个表单，其中包含分配给该键的对象中的值。

我遇到的问题是编辑表单数据并将其保存回对象，因为表单是动态创建的。

演示:http://jsfiddle.net/kHysL/1/

代码(不要注意上面的代码$(document).ready()…它是字符串解析器):

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

请输入如何将其保存回对象

通过在形成列表的原始循环中指定click处理程序，可以大大简化可单击对象列表。

表单生成和保存功能由于数据的特殊性而变得复杂，即其中一个objStr.View属性是字符串，而其他属性是对象。您将在下面看到，我们必须在两个地方进行分支来处理这个差异。

$(document).ready(function () {
    var $objectList = $('<div id="main" />').appendTo($('#main'));
    $.each(objStr.View, function(k, v) {
        $('<div/>').append(k).appendTo($objectList).on('click', function(){
            var $wrapper = $('#form .wrapper').empty();
            if(typeof v === 'string') {
                $('<div class="item" />').append('<span class="key">' + k + '</span>' + '<input value="' + v + '"/>').appendTo($wrapper);
            }
            else {//object
                $('<h3 class="formHeading" />').append(k).appendTo($wrapper);
                $.each(v, function(key, val) {
                    $('<div class="item" />').append('<span class="key">' + key + '</span>' + '<input value="' + val + '"/>').appendTo($wrapper);
                });
            }
            $("<button>Save</button>").appendTo($wrapper).on('click', function() {
                if(typeof v === 'string') {
                    v = $(this).closest(".wrapper").find("input").val();
                }
                else {//object
                    $(this).closest(".wrapper").find(".item").each(function(i, div) {
                        var $div = $(div),
                            key = $div.find(".key").text(),
                            val = $div.find("input").val();
                        v[key] = val;
                    });
                }
            });
        });
    });
});

您还将看到，这段代码不需要在HTML中硬编码"保存"按钮。每次填充表单时都会生成一个新的"Save"按钮。这不是必须的，但这是我采用的方法。

更新小提琴

相关文章：