1

ここで何をしようとしているのかを説明できるよう最善を尽くします。少し複雑です（少なくとも私にとっては）

、現在、ループしてHTMLフォームに動的に入力するオブジェクトがあります。このコードは、オブジェクトの値を入力に配置し、それらを編集してオブジェクトに保存できるようにします。

ただし、実際に行う必要があるのは、オブジェクト フィールドを、別のオブジェクトで定義されている一連のフィールドにマップすることです。これは、元のオブジェクトにデータが欠落している場合があり、フォームから追加したいためです。

例: 私のオブジェクトにはプロパティ「ボタン」があります。オブジェクトには、幅、高さ、位置などの k,v があります。しかし、「ボタン」で使用可能なフィールドを定義する他のオブジェクトには、幅、高さ、位置、色、およびトランジションがあります。私がやろうとしているのは、「ボタン」ラベルをクリックすると(デモを参照)、「コントロール」オブジェクトのすべてのフィールドが表示され、値を含む他のオブジェクトからすべての値が入力されます。次に、空の入力に値を追加すると、それらがオブジェクトに保存されます。

これが私のデモです（フォーム入力を表示するにはラベルをクリックしてください）：http://jsfiddle.net/bGxFC/6/

これが私のコードです：

    var controls = {
    "Controls": [{
        "Button":[{"Transition": "","BackgroundImage": "","Position": "","Width": "","Height": ""}],

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

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


var str = 'View\n{\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    \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 $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;
                    });
                }
            });
        });
    });
});

どうすればこの問題を解決できますか?

4

1 に答える 1

0

関連付けるオブジェクト キーも含めるには、html の入力要素が必要です。

何かのようなもの：

<div class="wrapper">
<h3 class="formHeading" data-item="Button_2">Button_2</h3>

<div class="item"><span class="key">Type</span><input value="Button" data-property="Type"></div>
<div class="item"><span class="key">BackgroundImage</span><input value="Button2.gif"  data-property="BackgroundImage"></div>
<div class="item"><span class="key">Position</span><input value="65,217"></div><button class="save">Save</button>

</div>

JS

$('button.save').click(function(){
    var $form=$(this).closest( '.wrapper'), itemName=$form.find('.formHeading').data('item')
   var objectItem= storedObject[ itemName ];

   $('.item').each(function(){
        var $input=$(this).find(':input');
        objectItem[ $input.data('property')]= $input.val();
   })  

})

すべての文字列パーサーを取り除き、デモで適切な JavaScript オブジェクトを使用し、これらの html の変更を追加できる場合は、そこからデバッグをお手伝いさせていただきます。

于 2012-12-30T01:51:09.287 に答える