Limit number of list items to be displayed in List expression

Question

I have a requirement of displaying a list array in two divs, first half in first DIV and second half list in second DIV. Please not that I don't want to splice the list array in two parts and display them in two lists.

Here is the template I have, for example

<!-- First half number of items should be displayed in firstHalf div -->
<div id="firstHalf">
   {{#each names:i}}
      {{firstName}} {{lastName}}
   {{/each}}
</div>
<!-- Second half number of items should be displayed in secondHalf div -->
<div id="secondHalf">
   {{#each names:i}}
      {{firstName}} {{lastName}}
   {{/each}}
</div>

For example If I have data like below

var data = [ {
    firstName : "Joe", lastName: "Armstrong"
}, {
    firstName : "Jose", lastName: "Valim"
}];

It needs to be rendered like below

<div id="firstHalf">
   Joe Armstrong
</div>
<div id="firstHalf">
   Jose Valim
</div>

Please give me suggestions to proceed further.

Answer 1

Mustache is logic less, and if you do not provide two arrays, you cannot split the entries in two divs.

When the template is rendered each occurring {{key}} is substituted with the same value, for each element in the list.

For this you could probably use handlebars.

Answer 2

You can probably do it by iterating over the list twice in a template and still only using one array. Just use a conditional in each iteration to to the first or second half of the list.

Template has two sections: one for each half

<div id="firstHalf">
    {{#each names:i}}
        {{#if i < names.length / 2}} // Conditional to only display first half of `names`
            {{firstName}} {{lastName}}
        {{/if}}
    {{/each}}
</div>
<div id="secondHalf">
    {{#each names:i}}
        {{#if i > names.length / 2}} // Conditional to only display second half of `names`
            {{firstName}} {{lastName}}
        {{/if}}
    {{/each}}
</div>

Inspired by code from here: http://pastie.org/9415897#

Answer 3

Another valid approach would be to reference list members indirectly, via an index reference. In this example we're generating a range of indices, and then referring to list[this] :

<!-- First half number of items should be displayed in firstHalf div -->
<div id="firstHalf">
   {{#each range(0,names.length/2) }}
      {{names[this].firstName}} {{names[this].lastName}}
   {{/each}}
</div>

<!-- Second half number of items should be displayed in secondHalf div -->
<div id="secondHalf">
   {{#each range(names.length/2,names.length) }}
      {{names[this].firstName}} {{names[this].lastName}}
   {{/each}}
</div>

The range() function just looks like this:

function ( start, end ) {
    var arr = [];
    for ( i = Math.floor(start); i < Math.floor(end); i += 1 ) {
        arr.push( i );
    }
    return arr;
}

Even though there's a perfectly good solution from pseudosavant, I'm mentioning this because indirectly referencing elements is a useful trick to have up your sleeve when doing things like two-way binding with tabular data.