使用 jQuery 模板进行数组迭代

Question

我有一个 JavaScript 数组：

var personDetails = [
{firstName: "Anup", lastName: "Vasudeva", City: "Delhi"},
{firstName: "Vikas", lastName: "Kumar", City: "Banglore"},
{firstName: "Dannis", lastName: "Richie", City: "Texas"},
{firstName: "Ajay", lastName: "Sharma", City: "Pune"},
{firstName: "Deepak", lastName: "Aggarwal", City: "Delhi"},
{firstName: "Ajay", lastName: "Sharma", City: "Banglore"}

]

这是我打算设计的模板：

<div class="left">
     <!-- Should display the first half of the rows -->
     {{tmpl($data) "#someTemplate"}}
</div>
<div class="right">
    <!-- Should display the rest half of the rows -->
    {{tmpl($data) "#personTemplate"}}   
</div>

<script id="personTemplate" type="text/x-jquery-tmpl">
{{each personDetails}}
    <div class="person">
        <div>${firstName}</div>
        <div>${lastName}</div>
        <div>${city}</div>
    </div>
{{/each}}

如何操作包含前半部分行和后半部分行的数组。

编辑： 实际上，用户将按原样传递数组，而模板逻辑会将数组分成两半。

感谢阅读。

Answer 1

不要使用模板以这种方式操作数据。在将用户给定的数组提供给模板之前，请在外部执行此操作。您不想这样做的原因是，如果您让模板来处理此类逻辑，那将比在外部执行它要慢得多。这对于 10-20 个项目的数组来说并不明显，但如果数组由于某种原因变得很大，那么模板会明显变慢。

Answer 2

使用Array.slice 将您的输入分成两半：

var input = [
    {firstName: "Anup", lastName: "Vasudeva", City: "Delhi"},
    {firstName: "Vikas", lastName: "Kumar", City: "Banglore"},
    {firstName: "Dannis", lastName: "Richie", City: "Texas"},
    {firstName: "Ajay", lastName: "Sharma", City: "Pune"},
    {firstName: "Deepak", lastName: "Aggarwal", City: "Delhi"},
    {firstName: "Ajay", lastName: "Sharma", City: "Banglore"}
];

var half_point = Math.floor(input.length / 2);
var first_half  = input.slice(0, half_point);
var second_half = input.slice(half_point+1)

console.log(first_half, second_half)

更新

我不确定您为什么要在模板本身中执行此操作，我建议您将此逻辑移动到数据旁边，也许通过向Array 对象添加一个方法：

Array.prototype.chunk = function(chunk_count, chunk_no) {
    var chunk_size = Math.floor(this.length / chunk_count);
    return this.slice(chunk_no * chunk_size, chunk_size + chunk_no * chunk_size);
}

...并从模板的 each 方法中调用它，如下所示：

<script id="personTemplate" type="text/x-jquery-tmpl">
<div class="left">
    {{each data.chunk(2, 0)}}
    <div class="person">
        <div>${firstName}</div>
        <div>${lastName}</div>
        <div>${city}</div>
    </div>
    {{/each}}
</div>
<div class="right">
    {{each data.chunk(2, 1)}}
    <div class="person">
        <div>${firstName}</div>
        <div>${lastName}</div>
        <div>${city}</div>
    </div>
    {{/each}}
</div>
</script>

扩展（在其他圈子中为“monkeypatching”）核心类是否是一个好主意值得商榷，您也可以将相同的功能直接添加到您的 input 变量中。 然而，在渲染之前使用分配给模板的两个单独变量可能会导致更少的意外，因此可能会更有利。