1

HTML テンプレートをレンダリングするたびに、複数の単語を新しい単語に置き換えようとしています。

テンプレート (非常に大きい) を 3 回ループして 3 つの異なる単語を探す代わりに、3 つの単語とその置換を組み合わせて、テンプレートを 1 回だけループしたいと考えています。(また、明らかに以下のコードは、最後の単語 {id} のみを置き換えます。これは、その上にある他の 2 つの置換試行をオーバーライドするためです)。

       $.get('/templates/list-item.html', function(data) {
          var template = data,
              tmp = '';

          $.getJSON('conf.json', function(data) {
            var items = [],
                list = data.default;

            for (var item in list) {
              var name = item.name,
                  value = list[item].value,
                  id = list[item].id;

              tmp = template.replace('{name}', name);
              tmp = template.replace('{value}', value);
              tmp = template.replace('{id}', id);

              items.push(tmp);
            }

            $('<div/>', {
              html: items.join('')
            }).appendTo('body');
          });
        });

明らかに、テンプレートのレンダリングは JS で行うべきではありませんが、内部使用のみであるため、バックエンドは使用できず、Google によってインデックス化される必要もないため、当面は問題ありません。

4

1 に答える 1

9

コールバック関数を使用して、テンプレート変数を置き換えることができます。たとえば、次のように考えてください。

template = "{foo} and {bar}"
data = {foo:123, bar:456}

template.replace(/{(\w+)}/g, function($0, $1) {
    return data[$1];
});

ループをmap()に置き換えることもお勧めします。

items = $.map(list, function(item) {
   var data = {name: item.name, value:.... etc }
   return template.replace(/{(\w+)}/g, function($0, $1) {
       return data[$1];
   });
}

/{(\w+)}/g基本的には次のことを意味します。

/                - start pattern
{                - match { literally
    (            - begin group 1
        \w       - a "word" character (letter+digit+underscore)
        +        - repeat once or more
    )            - end group 1
}                - match } literally
/                - end pattern
g                - match globally, i.e. all occurences

コールバック関数が呼び出されると、一致全体が最初のパラメーターとして取得され、グループ 1 の値が 2 番目のパラメーターとして取得されます。だから、それを見ると{foobar}、それは呼び出しますcallback("{foobar}", "foobar")。

于 2012-05-30T06:37:36.997 に答える