0

この関数を使用して、javascript を使用してHTMLをテンプレート化しています。

 parseTemplate = function(tmpl, data) {
   var regexp;

  for (k in data) {
     regexp = new RegExp('{' + k + '}', 'g');
     tmpl = tmpl.replace(regexp, data[k]);
    }
   return tmpl;
   }

のJSONようなオブジェクトで

JSONdata = { 
  prop1 : val,
  prop2 : val,
  prop3 : {
           prop1of3 : 
           prop2of3 :
           ...
           }
  ... 
  }

中括弧HTMLと righeを使用して、 ortemplateのようなすべての要素をレンダリングできます。そうしないと、関数がそれを見つけられない (?) ため、レンダリングできません。この種の JSON オブジェクトの要素のプロパティもレンダリングするソリューションを提案できますか? jQueryはありがたいprop1prop2prop1of3

4

2 に答える 2

0

これは私が個人的に使用する良い例です。

http://jsfiddle.net/g9e6u/

秘訣は、ブランチの内側を正規表現と一致させてから、クロージャーを使用して一致を何に置き換えるかを決定することです。この場合、_renderProperty()は値を決定します。この関数はコンテキストctxを取得し、一致した文字列nameをそれに追加します。したがって、マッチングhobbies.beachはとして評価されctx.hobbies.beachます。はeval評価を行い、最終的な値を。という名前の変数に割り当てますvalue。ボーナスとして、中かっこ内でjavascriptを使用することもできます。

function Template(html) {
    this.html = html;

    this.render = function (context) {
        var self = this;
        return this.html.replace(/\{(.+?)\}/g, function (full, group) {
            return self._renderProperty(group, context);
        });
    }

    this._renderProperty = function (name, ctx) {
        var value;
        eval('value = ctx.' + name);
        return value;
    }
};

var context = {
    name:'John Doe',
    age: 200,
    hobbies: {
        beach:'I like walking there',
        flute:'Sounds like an angel',
        deep: {
            sea:'deep sea diving'
        }
    }
};

var t = new Template("My name is {name.replace(/o/, 'X')}, {age} years old. One of my hobbies is the beach because {hobbies.beach}. I also like {hobbies.deep.sea.toUpperCase()}");

var output = t.render(context);
alert(output);
于 2013-03-13T22:36:51.110 に答える
0

...正規表現から取り出した文字列を操作しています。

文字列を操作しているため、data["prop1.sub_prop2"]実際に取得しようとしている場合は機能しませんdata.prop1.sub_prop2。

したがって、オブジェクトを浅くする必要があります。

data = {
    prop1 : "",
    a_obj_prop_1 : "",
    a_obj_prop_2 : ""
};

...これでは生活が楽にはなりません...

...または、RegEx から取得した文字列を取得してチェックする必要が.あります。存在する場合は、文字列を配列に分割し、その配列をループして、次のオブジェクトを取得します.. .

var parts_arr = "obj_a.client.id".split("."),
    key,
    item = data;

while (parts_arr.length > 0) {
    key = parts_arr.shift();
    item = item[key];
}

完了したらitem、最後の の後ろにあるものと等しくなるはずです.。

もちろん、.テンプレートにない場合は、これを完全にスキップする必要があります。
再帰的に書くこともできます。

これを機能させるには、あらゆる種類の方法があります。

うまくいけば、これはかなり明確です。

于 2013-03-13T21:35:01.197 に答える