javascript - Javascript - あるオブジェクトに基づいて動的にフォームに入力し、別のオブジェクトから値を入力する

Question

値を格納するために使用されるオブジェクトの要素に追加できる、使用可能なすべてのフィールドのテンプレートとして使用する JSON オブジェクトがあります。

値を保持する別のオブジェクトがあります。すべての値を格納するこのオブジェクトの k,v は、アプリケーションで生成されませんでした。それは私に渡され、特定の要素に対して利用可能なすべてのキーを定義する JSON に基づいて動的に作成されるフォームにその値を入力する必要があります。私のデモアプリをお見せするのが一番です。
デモ: http://jsfiddle.net/bGxFC/15/
1. "Button_2" ラベルをクリックします - フォームに 5 つの k,v 入力が入力されていることに注意してください 2. "Button_1" ラベルを
クリックします - これが 6 k, v 入力3. これらはどちらも「タイプ」です: 「ボタン」です ​​が
、「Button_2」には入力から「トランジション」がありません。
var controls


コードを変更して「 」の値を使用し、objStrそれらを「コントロール」によって作成されたフォームに配置する必要があります。そして、空の入力 (つまり、「Button_2」の「Transition」入力) に値を追加すると、「objStr」に保存されます。

これが私のコードです：

     var controls = {
    "Button":{"Type": "", "Transition": "","BackgroundImage": "","Position": "","Width": "","Height": ""},

    "Image":{"Type": "","BackgroundImage": "","Position": "","Width": "","Height": ""},

    "Label":{"Type": "","Position": "","Width": "","Height": "","Text": "","FontSize":"","Color": "", "FontType": ""}
};


objStr = {
        "View_1":
        {
            "Image_1":{
                "Type":"Image",
                "BackgroundImage":"Image.gif",
                "Position":[0,0],
                "Width":320,
                "Height":480
            },
            "Button_1":{
                "Type":"Button",
                "BackgroundImage":"Button.gif",
                "Transition":"View2",
                "Position":[49,80],
                "Width":216,
                "Height":71
            },
            "Button_2":{
                "Type":"Button",
                "BackgroundImage":"Button2.gif",
                "Position":[65,217],
                "Width":188,
                "Height":134},
            "Label_1":{
                "Type":"Label",
                "Position":[106,91],
                "Width":96,
                "Height":34,
                "Text":"Button",
                "FontSize":32,
                "Color":[0.12549,0.298039,0.364706,1]
            }
        }
    };

$(document).ready(function () {
    var $objectList = $('<div id="main" />').appendTo($('#main'));
    $.each(objStr.View_1, 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;
                    });
                }
            });
        });
    });
});