web-dev-qa-db-ja.com

2012年に推奨されるjQueryテンプレートは?

jQueryテンプレートは、しばらくの間非推奨になりました。

JavaScriptオブジェクトの形式のデータがあり、それをHTMLとしてフォーマットし、DOMに追加します。最近、それを行う最善の方法は何ですか?

  1. HTML文字列を作成する必要がありますか?
  2. $('<li>',{id:'my-'+Id}).append($('<span>').text(myText))などのjQueryを介して要素を作成する必要がありますか?
  3. JQueryテンプレートの代替品または成熟した代替品はありますか?
55
mpen

これは私のプロジェクトでそれを行う方法です:

HTMLでテンプレートを定義します。

<script type="text/template" id="cardTemplate">
<div>
    <a href="{0}">{1}</a>
</div>
</script>

String.formatを使用して変数を置換します。

var cardTemplate = $("#cardTemplate").html();
var template = cardTemplate.format("http://example.com", "Link Title");
$("#container").append(template);

string.format

String.prototype.format = function() {
  var args = arguments;
  return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined'
      ? args[number]
      : match
    ;
  });
};

非常にシンプルで、テンプレートを組み合わせることができます。

104
sachleen

間違いなく ハンドルバー および/または 口ひげ を試してください

私はハンドルバーを使用する傾向がありますが、構文は非常に似ています。

10
Antonio Laguna

Mustache.jsはテンプレート化に非常に適しています。

https://github.com/janl/mustache.js

9
Joe

ずっとテンプレート。JSONを手動で解析するよりもずっと簡単です。私がそれに貢献したので、テンプレートのコンパイルを必要とせず、JSONとJavaScriptのみを使用するため、json2htmlには賛成です。

http://json2html.com

7
Chad Brown

私は本当にJavaScriptを使用してhtml要素を構築するのが好きではないので、テンプレートを使用することをお勧めします。
テンプレートのリストと関連する質問を見つけることができます こちら

以前はjQuery Templatesを使用していましたが、非常にシンプルですが、もはや積極的ではありません。