1

我有一个 JSON 对象，我将其用作所有可用字段的模板，这些字段可以添加到我的对象中用于存储值的元素中。

我有另一个保存值的对象。这个存储所有值的对象的 k,v 不是在我的应用程序中生成的。它交给我，我需要以基于我的 JSON 动态创建的表单填充该值，该 JSON 定义了给定元素的所有可用键。最好我向您展示我的演示应用程序。
演示： http: //jsfiddle.net/bGxFC/15/
1. 单击“Button_2”标签 - 注意它如何使用 5 k,v 输入填充表单
2.现在单击“Button_1”标签 - 注意它是如何有 6 k 的， v 输入
3。这两个都是“类型”：“按钮”，但“按钮_2”的输入中缺少“转换”
4这是我的“ 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;
                    });
                }
            });
        });
    });
});
4

0 回答 0