jquery - Handlebarsjs - オブジェクトを 3 列に変換しても結果が得られない

Question

内部に 15 個のデータを含むオブジェクトがあり、それらを 3 つの列に配置することにしました。ヘルパー関数を使用してそれらを 3 つのグループに分割し、最後に新しいオブジェクトを返します。オブジェクトを返した後、if条件を使用して要素を操作しています..

私が間違っていることをアドバイスしたり、正しい方法を教えてもらえますか..?

ここにhtml部分があります：

<div id="columns"></div>

 <script id="navi-template" type="text/x-handlebars-template">
        {{#colMaker this}}
            {{#if this.f}}
                <div class="col0">{{name}}</div>
            {{/if}}
            {{#if this.s}}
                <div class="col1">{{name}}</div>
            {{/if}}
            {{#if this.t}}
                <div class="col2">{{name}}</div>
            {{/if}}
        {{/colMaker}}
</script>

動作の一時部分:

var obj = {
    "columns":[ {"name":"name1"},{"name":"name2"},{"name":"name3"},{"name":"name4"},{"name":"name5"},{"name":"name6"},
        {"name":"name7"},{"name":"name8"},{"name":"name9"},{"name":"name10"},{"name":"name11"},{"name":"name12"},
        {"name":"name13"},{"name":"name14"},{"name":"name15"}
    ]
}



Handlebars.registerHelper("colMaker", function(arr, options, context){

    var fn = options.fn, ret = "";

    for(i=0;i<arr.length;i++){
        if(i % 3 == 0){
            ret += fn({"f":"f","name" : arr[i].name});
        }else if(i % 3 == 1){
            ret += fn({"s":"s","name" : arr[i].name});
        }else if(i % 3 == 2){
            ret += fn({"t":"t","name" : arr[i].name});
        }
    }

    return ret;

})

var temp = Handlebars.compile($("#navi-template").html());
$("#columns").html(temp(obj.columns));

要素の部分をループではなくhtmlドキュメントに保持するために結果を取得するのが好きな方法。前もって感謝します。

ライブデモ