How to render a (Twitter Bootstrap) grid using Ember.js and Handlebars.js?

Answer 1

For those interested, here is a pretty clean way to handle this scenario.

Here is the template:

{{#each post in posts}}
  {{#if post.first}}
    

  {{/if}}
    

      

        {{post.title}}
      
    
  {{#if post.lastOfRow}}
    
    

  {{/if}}
  {{#if post.last}}
    
  {{/if}}
{{/each}}

And the corresponding controller:

App.PostsController = Ember.ArrayController.extend({
  posts: function () {
    var length = this.get('length');

    return this.map(function (post, i) {
      // Checks if it’s the last post
      if ((i + 1) == length) {
        post.last = true;
      } else {
        post.last = false;

        // Checks if it’s the first post
        if (i == 0) {
          post.first = true;
        } else {
          post.first = false;
        }

        // Checks if it’s the last post of a row
        if ((i + 1) % 3 == 0) {
          post.lastOfRow = true;
        } else {
          post.lastOfRow = false;
        }
      }

      return post;
    });
  }.property('content.@each')
});

This may also be useful to generate tables (with nested in )… Even though I ended up using kiwiupover’s solution! ;-)

Regards,

D.