underscore.js template test

README

underscore.js初挑戦。
多次元配列化。

jsdoit.css

body {
    font-size: 12px;
}

.headings {
    overflow: hidden;

    div {
        float: left;
        margin-right: 5px;
    }
}

.contents {
    .inner {
	    overflow: hidden;

        div {
            float: left;
	        margin-right: 5px;
        }
    }
}

jsdoit.html

<script type="text/template" id="testTemplate">
<!-- TODO: dataの任意の行を見出しにできたらいいなー -->
<div id="class01" class="class">
    <div class="list">
        <div class="headings">
            <div>クラス</div>
            <div>順位</div>
            <div>名前</div>
            <div>点数</div>
            <div>Facebook</div>
            <div>Twitter</div>
            <div>Blog</div>
        </div>
        <div id="c1Rank01" class="contents">
            <div class="inner">
           	    <div><%= data[1][0] %></div>
                <div><%= data[1][1] %></div>
                <div><%= data[1][2] %></div>
                <div><%= data[1][3] %></div>
                <div><%= data[1][4] %></div>
                <div><%= data[1][5] %></div>
                <div><%= data[1][6] %></div>
            </div>
        </div>
        <div id="c1Rank02" class="contents">
            <div class="inner">
           	    <div><%= data[2][0] %></div>
                <div><%= data[2][1] %></div>
                <div><%= data[2][2] %></div>
                <div><%= data[2][3] %></div>
                <div><%= data[2][4] %></div>
                <div><%= data[2][5] %></div>
                <div><%= data[2][6] %></div>
            </div>
        </div>
        <div id="c1Rank03" class="contents">
            <div class="inner">
           	    <div><%= data[3][0] %></div>
                <div><%= data[3][1] %></div>
                <div><%= data[3][2] %></div>
                <div><%= data[3][3] %></div>
                <div><%= data[3][4] %></div>
                <div><%= data[3][5] %></div>
                <div><%= data[3][6] %></div>
            </div>
        </div>
    </div>
</div>
<div id="class02" class="class">
    <div class="list">
        <div class="headings">
            <div>クラス</div>
            <div>順位</div>
            <div>名前</div>
            <div>点数</div>
            <div>Facebook</div>
            <div>Twitter</div>
            <div>Blog</div>
        </div>
        <div id="c2Rank01" class="contents">
            <div class="inner">
           	    <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div id="c2Rank02" class="contents">
            <div class="inner">
           	    <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div id="c2Rank03" class="contents">
            <div class="inner">
           		<div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</div>
</script>

jsdoit.js

function testTemplate() {
    _.templateSettings.variable = 'data';
    
    var tmpl = '';    
    var tmplData = [];
    
    tmpl = $('#testTemplate').html();
    tmplData = [
        ['クラス', '順位', '名前', '点数', 'Facebook', 'Twitter', 'Blog'],
        ['Class1', '1', 'kubosho_', '100', 'ta2xo2p', 'kubosho_', 'http://inputxoutput.com'],
        ['Class1', '2', 'hoge','80', '', '', 'http://inputxoutput.com'],
//        ['Class1', '3', 'fuga','', '', 'fuga', ''],
        ['Class2', '1', 'kubosho_', '100', 'ta2xo2p', 'kubosho_', 'http://inputxoutput.com'],
        ['Class2', '2', 'hoge','80', '', '', 'http://inputxoutput.com'],
        ['Class2', '3', 'fuga','', '', 'fuga', ''],
        ['-', '1', 'kubosho_', '100', 'ta2xo2p', 'kubosho_', 'http://inputxoutput.com'],
        ['-', '2', 'hoge','80', '', '', 'http://inputxoutput.com'],
        ['-', '3', 'fuga','', '', 'fuga', '']
    ];
    
    $('body').append(
        _.template(tmpl, tmplData)
    );
}
testTemplate();