Question

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

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

Javascript - 基于一个对象动态填充表单并填充另一个对象的值

0 个答案: