Форма, созданная динамически из цикла Javascript Object. Как сохранить данные назад к объекту

Question

Форма, созданная динамически из цикла Javascript Object. Как сохранить данные назад к объекту

У меня есть следующий код, который принимает строку, изменяя ее в объект. Затем я создаю список элементов, и когда пользователь нажимает на один из элементов списка, он создает форму со значениями, которые были в объекте, назначенном этому ключу.

Проблема, с которой я сталкиваюсь, заключается в редактировании данных формы и ее возврате к объекту, так как форма была создана динамически.

Demo: 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 + '>' + '';
                console.log(v);

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

    });
});

Ввод того, как сохранить его обратно на объект, будет оценен

0

добавлено 28 Декабрь 2012 в 07:34 автор Rob

Просмотры: 23

источник

nl ja de

1 ответы

автор Beetroot-Beetroot · Answer 1 · 2012-12-28T11:36Z

Сделать доступный список объектов можно значительно упростить, указав обработчик кликов внутри исходного цикла, который формирует список.

Функции создания и сохранения формы сложны причудой данных, а именно, что один из свойств 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('' + k + '' + '<input value="' + v + '"/>').appendTo($wrapper);
            }
            else {//object
                $('').append(k).appendTo($wrapper);
                $.each(v, function(key, val) {
                    $('<div class="item" />').append('' + key + '' + '<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. Новая кнопка «Сохранить» генерируется каждый раз, когда заполняется форма. Это не должно быть так, но это подход, который я принял.

обновленная скрипта