Question

现在计算7个数据，可能会有所不同。我需要通过除以4来拆分这些数据，并且需要附加到div的多个列并追加到父级。

怎么做？

我的模板：

<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>

我的Js和数据：

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

更新： 我试过这样，但没有人帮我吗？

我写的新功能:(参见演示链接）

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

我认为你只需要为一列表达你的胡子模板。例如：

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

然后

$.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);
});

小胡子模板 - 如何将数据拆分为4列并附加到父级？

1 个答案: