追記:jsdo.it に書いて貼ってみた
元のコード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Underscore.js - template sample</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> <script type="text/javascript"> $(function () { function outerDefinition() { // バインドするオブジェクト定義 var users = [ {"name": "Taro", "age": 1}, {"name": "Jiro", "age": 2}, {"name": "Saburo", "age": 3}, {"name": "Shiro", "age": 4} ]; // テンプレートを取得 var template = $("#greeting-template").text(); // テンプレートを定義 var compiled = _.map(users, function(user) { return _.template(template, user); }) // テンプレート適用 $("#show-template").html(compiled); } var name = $("#name").val(); outerDefinition(); }); </script> </head> <body> <!-- テンプレート適用先 --> <ul id="show-template"></ul> <!-- テンプレート外部定義--> <script type="text/template" id="greeting-template"> <% if (age < 3) { %> <li><%= name %> (age: <%= age %>)</li> <% } else { %> <li>over the age limit!</li> <% }%> </script> </body> </html>
実行結果
Taro (age: 1) Jiro (age: 2) over the age limit! over the age limit!