3

作成中のプラグインにマイクロ テンプレートを取り込もうとしています。私はすべてうまくいっていますが、データ内のネストされた配列に関しては問題があります。よろしくお願いいたします。削除されたコードは次のとおりです。

var locations = [{
            "name": "Disneyland California",
            "address": "1313 North Harbor Boulevard"
        },
        {
            "name": "Walt Disney World Resort",
            "address": "1503 Live Oak Ln"
        }],

        tmplData = [{
                    location: locations[0],
                    foo: "bar"
                }],

        template = "Shipping From:<br><b>{{location.name}}, {{foo}}",
        attachTemplateToData;

        attachTemplateToData = function(template, data) {
            var i = 0,
                len = data.length,
                fragment = '';
            function replace(obj) {
                var t, key, reg;
                for (key in obj) {
                    reg = new RegExp('{{' + key + '}}', 'ig');
                    t = (t || template).replace(reg, obj[key]);
                }       
                return t;
            }
            for (; i < data.length; i++) {
                fragment += replace(data[i]);
            }   
            console.log(fragment);
        };  
        attachTemplateToData(template, tmplData);

ログ:

bar,{{location.name}}

console.log でわかるように、「foo」は問題なく出力されますが、「location.name」(「ディズニーランド カリフォルニア」) もレンダリングする必要があります。ネストされたループになることはわかっていますが、一生構文を理解することはできません。ところで、テンプレート ソリューションはここから来ました: http://net.tutsplus.com/tutorials/javascript-ajax/create-a-makeshift-javascript-templating-solution/ ありがとう!

編集::: ロケーション オブジェクトの任意のプロパティをテンプレートに配置できるようにすることを検討しています。たとえば、ユーザーが location.city または locations.foo を配列に追加することを決定した場合、テンプレートでは {{location.city}} または {{location.foo}} に移動するだけです。jQuery の tmpl プラグインを使用してこれを達成できましたが、それが提供するすべてのものは必要ありません。上記のインスタンスのみを処理するために、私が持っているような非常にストリップされたバージョンが欲しいです。これが私がtmplプラグインで行ったことです（動作します）：

tmplData = [{
                    locations: settings.locations[i]
                }];

            var tmplMarkup = "Shipping From:<br><b>${locations.name}, ${locations.city}, ${locations.state}</b>";
            $.template("deTemplate", tmplMarkup);
            $.tmpl("deTemplate", tmplData).appendTo("#deResults");
4

3 に答える 3

1

これの代わりに：

    var locations = [{
        "name": "Disneyland California",
        "address": "1313 North Harbor Boulevard"
    },
    {
        "name": "Walt Disney World Resort",
        "address": "1503 Live Oak Ln"
    }],

    tmplData = [{
                location: locations[0],
                foo: "bar"
            }],

    template = "Shipping From:<br><b>{{location.name}}, {{foo}}",
    attachTemplateToData;

これを試して：

    var locations = [{
        name: "Disneyland California",
        address: "1313 North Harbor Boulevard"
    },
    {
        name: "Walt Disney World Resort",
        address: "1503 Live Oak Ln"
    }],

    tmplData = [{
                location: locations[0].name,
                foo: "bar"
            }],

    template = "Shipping From:<br><b>{{location}}, {{foo}}",
    attachTemplateToData;

実際には、.name が約 4 行必要なだけです。:)

于 2012-12-15T23:57:09.793 に答える
1

必要なのは{{prop}}、一致するコードだけでなく、一致するようにテンプレート認識を変更することです。{{prop.something}}

これを行うには、新しい正規表現を使用して別のifステートメントを追加します。

于 2012-12-16T00:11:26.977 に答える
0

入力していただきありがとうございますvittore、私はついにコードを理解しました。ここに必要な追加の if ステートメントと regEx があります。また、そこにも .hasOwnProperty 関数が必要であることがわかりました。

for(subKey in obj[key]){
                        if (obj[key].hasOwnProperty(subKey)) {
                            reg = new RegExp('{{'+key+'.'+subKey+'}}');
                            t = (t || template).replace(reg, obj[key][subKey]);
                        }
                    }

完成したコードは次のとおりです。

var locations = [{
        "name": "Disneyland California",
        "address": "1313 North Harbor Boulevard"
    },
    {
        "name": "Walt Disney World Resort",
        "address": "1503 Live Oak Ln"
    }],

    tmplData = [{
                location: locations[1],
                foo: "bar"
            }],

    template = "Shipping From:<br><b>{{location.address}}, {{foo}}",
    attachTemplateToData;

    attachTemplateToData = function(template, data) {
        var i = 0,
            j = 0,
            len = data.length,
            fragment = '';
        function replace(obj) {
            var t, key, subKey, subSubKey, reg;
            for (key in obj) {
                if (obj.hasOwnProperty(key)) {
                    reg = new RegExp('{{' + key + '}}', 'ig');
                    t = (t || template).replace(reg, obj[key]);
                    for(subKey in obj[key]){
                        if (obj[key].hasOwnProperty(subKey)) {
                            reg = new RegExp('{{' + key + '.' + subKey + '}}','ig');
                            t = (t || template).replace(reg, obj[key][subKey]);
                        }
                    }
                }
            }       
            return t;
        }
        for (; i < data.length; i++) {
            fragment += replace(data[i]);
        }   
        console.log(fragment);
    };  
    attachTemplateToData(template, tmplData);
于 2012-12-18T03:16:42.043 に答える