web-dev-qa-db-ja.com

underscore.jsをテンプレートエンジンとして使用する方法

私はサーバーサイド言語として、そして機能言語としてのJavaScriptの新しい使用法について学ぶことを試みています。数日前、node.jsとexpress frameworkについて聞いたことがあります。それから私はユーティリティ関数のセットとしてunderscore.jsについて見ました。私は stackoverflow についてのこの質問を見ました。それはテンプレートエンジンとしてunderscore.jsを使用できると言っています。誰もがテンプレート作成のためにアンダースコア.jsを使う方法についての良いチュートリアルを知っています、特に高度なJavaScriptの経験が少ない初心者のために。ありがとう

javascriptnode.jsfunctional-programmingunderscore.jstemplate-engine
257
knodumi

あなたがアンダースコアテンプレートについて知る必要があるすべては ここ です。覚えておくべきことは3つだけです：

  1. <% %> - コードを実行する
  2. <%= %> - テンプレートに値を表示する
  3. <%- %> - HTMLエスケープされたいくつかの値を印刷します

それだけです。

簡単な例：

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

tpl({foo: "blahblah"})は文字列<h1>Some text: blahblah</h1>にレンダリングされます

463
SET
<!-- Install jQuery and underscore -->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>

<!-- Create your template -->
<script type="foo/bar" id='usageList'>
<table cellspacing='0' cellpadding='0' border='1' >
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <%
        // repeat items 
        _.each(items,function(item,key,list){
          // create variables
          var f = item.name.split("").shift().toLowerCase();
      %>
        <tr>
          <!-- use variables -->
          <td><%= key %></td>
          <td class="<%= f %>">
            <!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') -->
            <h3><%- item.name %></h3>
            <p><%- item.interests %></p>
          </td>
        </tr>
      <%
        });
      %>
    </tbody>
  </table>
</script>

<!-- Create your target -->

<div id="target"></div>

<!-- Write some code to fetch the data and apply template -->

<script type="text/javascript">
  var items = [
    {name:"Alexander", interests:"creating large empires"},
    {name:"Edward", interests:"ha.ckers.org <\nBGSOUND SRC=\"javascript:alert('XSS');\">"},
    {name:"..."},
    {name:"Yolando", interests:"working out"},
    {name:"Zachary", interests:"picking flowers for Angela"}
  ];
  var template = $("#usageList").html();
  $("#target").html(_.template(template,{items:items}));
</script>
  • JsFiddle ありがとう@PHearst！
  • JsFiddle （最新）
  • JsFiddle 最初の文字でグループ化されたリスト（画像、関数呼び出し、サブテンプレート付きの複雑な例）はそれをforkします爆風を持っている...
  • JsFiddle 下記の@tarun_telangによるXSSハックのデモ
  • JsFiddle サブテンプレートを実行するための1つの非標準的な方法
198
Shanimal

最も単純な形式では、次のように使用します。

var html = _.template('<li><%= name %></li>', { name: 'John Smith' });
//html is now '<li>John Smith</li>'

テンプレートを何度か使うつもりなら、コンパイルしたほうがいいでしょう。

var template = _.template('<li><%= name %></li>');

var html = [];
for (var key in names) {
    html += template({ name: names[i] });
}

console.log(html.join('')); //Outputs a string of <li> items

私は個人的にはMoustacheスタイルの構文が好きです。二重中括弧を使用するようにテンプレートトークンマーカーを調整できます。

_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;

var template = _.template('<li>{{ name }}</li>');
93
evilcelery

テンプレート作成に関するドキュメントは部分的なものであり、私はソースを見ました。

_.template関数には3つの引数があります。

  1. 文字列text：テンプレート文字列
  2. オブジェクトdata：評価データ
  3. オブジェクトsettings：ローカル設定、_.templateSettingsはグローバル設定オブジェクトです。

data（またはnull）が指定されていない場合は、render関数よりも多く返されます。引数が1つあります。

  1. オブジェクトdata：上記のdataと同じ

設定には3つの正規表現パターンと1つの静的パラメータがあります。

  1. テンプレート文字列のRegExpevaluate： "<％code％>"
  2. テンプレート文字列内のRegExpinterpolation： "<％= code％>"
  3. RegExpescape： "<％ - code％>"
  4. 文字列variable：オプション、テンプレート文字列内のdataパラメータの名前

evaluateセクション内のコードは単純に評価されます。このセクションから__ p + = "mystring"コマンドを使って評価されたテンプレートに文字列を追加することができますが、これは推奨されません（テンプレートのインターフェースの一部ではありません）。 。このタイプのセクションは、ifやforのようにブロックをテンプレートに追加するためのものです。

interpolation/セクションのコードの結果は、評価されたテンプレートに追加されます。 nullが返された場合は、空の文字列が追加されます。

escapeセクションは、指定されたコードの戻り値で_.escapeを使用してHTMLをエスケープします。そのため、interpolation/セクションの_.escape(code)と似ていますが、\の空白でエスケープされます。\ nのような文字は、コードを_.escapeに渡します。なぜ重要なのかわかりませんが、コード内にありますが、interpolationおよび_.escapeでうまく機能します。空白文字も - .

デフォルトでは、dataパラメータはwith(data){...}ステートメントによって渡されますが、この種の評価は、withを使用した評価よりはるかに遅くなります。名前付き変数そのため、dataにvariableパラメータを付けて命名するのは良いことです...

例えば：

var html = _.template(
    "<pre>The \"<% __p+=_.escape(o.text) %>\" is the same<br />" +
        "as the  \"<%= _.escape(o.text) %>\" and the same<br />" +
        "as the \"<%- o.text %>\"</pre>",
    {
        text: "<b>some text</b> and \n it's a line break"
    },
    {
        variable: "o"
    }
);

$("body").html(html);

結果

The "<b>some text</b> and 
 it's a line break" is the same
as the "<b>some text</b> and 
 it's a line break" and the same
as the "<b>some text</b> and 
 it's a line break"

テンプレートを使用してデフォルト設定をオーバーライドする方法の例をさらに見つけることができます。 http://underscorejs.org/#template

テンプレートを読み込むことでたくさんの選択肢がありますが、最後には常にテンプレートを文字列に変換する必要があります。上記の例のように通常の文字列として指定するか、scriptタグからロードしてjqueryの 。html（） 関数を使用するか、別のファイルから次のようにロードします。 tplプラグイン of require.js .

テンプレートの代わりに laconic を使ってDOMツリーを構築するもう一つのオプション。

28
inf3rno

とても簡単な例を挙げています

1）

var data = {site:"mysite",name:"john",age:25};
var template = "Welcome you are at <%=site %>.This has been created by <%=name %> whose age is <%=age%>";
var parsedTemplate = _.template(template,data);
console.log(parsedTemplate);

結果は

Welcome you are at mysite.This has been created by john whose age is 25.

2）これはテンプレートです

   <script type="text/template" id="template_1">
       <% _.each(items,function(item,key,arr) { %>
          <li>
             <span><%= key %></span>
             <span><%= item.name %></span>
             <span><%= item.type %></span>
           </li>
       <% }); %>
   </script>

これはhtmlです

<div>
  <ul id="list_2"></ul>
</div>

これはjsonオブジェクトを含み、テンプレートをhtmlに入れるJavaScriptコードです。

   var items = [
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       } 
   ];
  $(document).ready(function(){
      var template = $("#template_1").html();
      $("#list_2").html(_.template(template,{items:items}));
  });
22
dinesh_malhotra

エクスプレスでそれはとても簡単です。あなたが必要とするものはすべてnodeでsolidateモジュールを使うことです。

npm install consolidate --save

それでは、デフォルトのエンジンをHTMLテンプレートに変更する必要があります。

app.set('view engine', 'html');

html拡張子のアンダースコアテンプレートエンジンを登録します。

app.engine('html', require('consolidate').underscore);

完了しました ！

今ロードするために例えば 'index.html'と呼ばれるテンプレート：

res.render('index', { title : 'my first page'});

多分あなたはアンダースコアモジュールをインストールする必要があるでしょう。

npm install underscore --save

これがお役に立てば幸いです。

14
Khalid Ahmada

もう一つ重要な発見を共有したいと思いました。

<％= variable =>を使用すると、クロスサイトスクリプティングの脆弱性が生じる可能性があります。そのため、代わりに<％ - variable - >を使用する方が安全です。

クロスサイトスクリプティング攻撃を防ぐために、<％=を<％に置き換える必要がありました。よく分からない、これがパフォーマンスに影響を与えるかどうか

12
Tarun

Lodashも同じです最初に次のようにスクリプトを書きます。

<script type="text/template" id="genTable">
<table cellspacing='0' cellpadding='0' border='1'>
        <tr>
            <% for(var prop in users[0]){%>
            <th><%= prop %> </th>
            <% }%>
        </tr>
        <%_.forEach(users, function(user) { %>
            <tr>
                 <% for(var prop in user){%>
                    <td><%= user[prop] %> </td>
                <% }%>

            </tr>
        <%})%>
</table>

次のように簡単なJSを書きます。

var arrOfObjects = [];
for (var s = 0; s < 10; s++) {
    var simpleObject = {};
    simpleObject.Name = "Name_" + s;
    simpleObject.Address = "Address_" + s;
    arrOfObjects[s] = simpleObject;
}
var theObject = { 'users': arrOfObjects }
var compiled = _.template($("#genTable").text());
var sigma = compiled({ 'users': myArr });

$(sigma).appendTo("#popup");

Popoupはテーブルを生成したいdivです。

1
Dr.Sai