0

(私は以下でこれに答えました){ name: 'iLoch', message: 'Hello' }与えられた DOM 要素などのオブジェクトを生成する方法と、それを生成したテンプレートを知りたいです。次に例を示します。

ドム:

<div>iLoch says "Hello"</div>

テンプレート：

<div>{{name}} says "{{message}}"</div>

そして、テンプレートを実際の DOM コンテンツと「交差」させることによって、その元のオブジェクトを生成したいと考えています。

{ name: 'iLoch', message: 'Hello' }
4

1 に答える 1

0

編集:これはまだ期待どおりに機能していないようです..交換が必要な複数のインスタンスでテストする必要がありました。それが動作するときに更新されます。

編集2：ここにあります！当初の期待どおりに動作するはずです... http://jsfiddle.net/Yy2yJ/

ここで見ることができるスコットのコメントに基づいてソリューションを作成しました: http://jsfiddle.net/faAsQ

何かが壊れているかどうかを確認するのに十分なほど十分にテストしていませんが、これが役に立った場合、または改善点がある場合は、ここにコメントしてください. 乾杯！

var untemplate = function(template, html) {
    var names = [],
        obj = {},
        encodedHtml = escape(html);

    var templateRegex = new RegExp(escape(template).replace(/[\\\/\.\-\*]/g, function(match) {
            return '\\' + match;
    }).replace(/%7B%7B([^(?:%7B)]+?)%7D%7D/g, function(match, name) {
            names.push(name);
            return '(.*?)';
        }), 'g');

    encodedHtml.replace(templateRegex, function() {

        for(var i = 1; i < arguments.length - 2; i++) {
            obj[names[i - 1]] = unescape(arguments[i]);
        }
    });

    return obj;
}

console.log(untemplate('<div id="test">{{name}}</div><a>{{desc}}</a><a>{{desc2}}</a>', document.getElementById('container').innerHTML));
于 2013-07-19T18:12:23.110 に答える