Mustache template - How to split datas to 4 column and append to parent?

Question

It counts 7 data now, may be it will vary. I need to split this data's by dividing 4 and need to append to multiple columns of a div and append to parent.

how to do that?

my template :

<script type="text/mustache-template" id="columns">

    <div id="content">

        {{#data}}

        <div class="col1">
            <span>Name : {{name}} and the Date is : {{date}}, Assignee is : {{assigned}} </span>
        </div>
        <div class="col2">
            <span>Name : {{name}} and the Date is : {{date}}, Assignee is : {{assigned}} </span>
        </div>
        <div class="col3">
            <span>Name : {{name}} and the Date is : {{date}}, Assignee is : {{assigned}} </span>
        </div>
        <div class="col4">
            <span>Name : {{name}} and the Date is : {{date}}, Assignee is : {{assigned}} </span>
        </div>

        {{/data}}

    </div>

</script>

my Js and data :

var staticData = {
    datas : [
        {"name": "Test Task #1", "date": "12/01/2012", "assigned": "John Doe" },
        {"name": "Test Task #2", "date": "12/02/2012", "assigned": "John Doe" },
        {"name": "Test Task #3", "date": "12/03/2012", "assigned": "John Doe" },
        {"name": "Test Task #4", "date": "12/04/2012", "assigned": "John Doe" },
        {"name": "Test Task #5", "date": "12/05/2012", "assigned": "John Doe" },
        {"name": "Test Task #6", "date": "12/06/2012", "assigned": "John Doe" },
        {"name": "Test Task #7", "date": "12/07/2012", "assigned": "John Doe" }
    ]
};


var template =  Mustache.render($('#columns').html(), staticData.datas);

$('body').append(template);

Live Demo

UPATE : I tried like this, But not work any one help me?

new function I written : ( see the demo link )

var newArray = [], columns = 4;

$.each(staticData.datas, function (index, value) {
    for(i=0;i < columns; i++){
        newArray[i] == undefined ? newArray[i] = [] : newArray[i]; //creating new arrays
    }
    newArray[index % 4 ].push(value); //pushing the appropriate values
});

var html = Mustache.render($('#columns').html(), newArray); //sending the hole new array.
$('body').append(html);

Live Demo of this function

Answer 1

I think you will need to express your mustache template for one column only. For instance:

<script type="text/mustache-template" id="column">
    <div>
        <span>Name : {{name}} and the Date is : {{date}}, Assignee is : {{assigned}} </span>
    </div>
</script>

Then

$.each(staticData.datas, function (index, value) {
    var html = Mustache.render($('#column').html(), value);
    var $div = $(html);
    $div.addClass("col" + (index%4 + 1));
    $('body').append($div);
});