0

このコードでは、構造化されていない String を取り込み、それを JS オブジェクトに解析します。これを Web フォームに適用する必要があります。

これがデモです。解析済み/構造化されたオブジェクト階層が示され、ターゲット アイテムの例が警告されます。

  1. キー項目のクリック可能なリストを作成します (つまり、ボタン、画像、ラベルなど)

  2. リスト項目をクリックして、フォームに値を入力します

  3. 値を変更してオブジェクトに保存します

いくつかの注意事項があります:

  1. 重複したキーがあります。データの整合性を維持しながら、それらを一意にする方法がわかりません。それらをネストすることはできません。私が考えることができる唯一のことは、それらに一意のIDを追加することです
  2. 理想的には、フォームはオブジェクトのフィールドに基づいてフィールドを動的に生成します。(つまり、「ボタン」には幅、高さ、トランジション、および名前があり、「ラベル」には異なるフィールド セットがあります。
  3. 一部の要素はネストされています (つまり、'Scroll' には独自の 'Buttons' と 'Labels' があります)。

どんな助けでも大歓迎です。以下のコードは要素のリストを作成しますが、クリックに基づいて値をフォームにロードすることはできません。

ここにコードがあります

    //Parse String
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 + "};");

//console.log(objStr.View.Button)
//alert(objStr.View.Scroll.Button.Width);
//End Parse String

$(document).ready(function () {

    //Build Initial Object LIst
    var initObjectList = '<div id="prePop">';
    $.each(objStr.View, function (k, v) {
        initObjectList += '<div class="inLineObjects">' + '<div class="key">' + k + '</div>' + '</div>';

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

オブジェクト出力の例:

    View:{
    Name:"View1",
    Image:{
        BackgroundImage:"Image.gif",
        Position: [0, 0],
        Width: 320,
        Height: 480
    },

    Button:{
        BackgroundImage:"Button.gif",
        Transition:"View2",
        Position: [49, 80],
        Width: 216,
        Height: 71
    },

    Button:{
        BackgroundImage:"Button2.gif",
        Position: [65, 217],
        Width: 188,
        Height: 134
    },

    Label:{
        Position: [106, 91],
        Width: 96,
        Height: 34,
        Text:"Button",
        FontSize: 32,
        Color: [0.12549, 0.298039, 0.364706, 1]
    },
    Scroll:{
        Position: [106, 91],
        Width: 96,
        Height: 34,
        Button:{
            BackgroundImage:"Button2.gif",
            Position: [65, 217],
            Width: 188,
            Height: 134
        },
        Button:{
            BackgroundImage:"Button2.gif",
            Position: [65, 217],
            Width: 188,

      Height: 134
        }

    }

}
4

2 に答える 2

0

解決策:http://jsfiddle.net/kHysL/

これが私の解決策です:

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

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

    });
});​
于 2012-12-28T03:04:05.530 に答える
0

私があなたを正しく理解していれば、おそらく最善の策は、フォームを作成するときにそれぞれのフォームをobjStr.View,作成することですが、そのフォームを非表示にしておくことです (CSS display:none)。次に、ユーザーがいずれかをクリックすると、あとは$(thatForm).show()設定が完了しているだけです。

于 2012-12-28T01:50:40.110 に答える