牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

Underscore.js のテンプレートで if や else の条件分を使ってみるメモ

Javascript

追記：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!

参考サイト