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

Answer 1

The accepted answer works well, but if you have posts that are dynamic the rows and spans will be re-drawn any time the posts model / property changes. This might be OK, if the content is small, but in my case I have a chart for each block and it's readily apparent when they all are redrawn at the same time.

In my case, I decided to override the bootstrap css; however, you would want to account for various screen sizes via additional media queries.

Here's the rules to target the largest grid and ensure that there are 3 span4s (note this was BS 2.3.2) correctly aligned on each "row", but inside a single row-fluid:

  .row-fluid [class*="span4"]:nth-of-type(3n+1) {
    margin-left: 0;
  }
  .row-fluid [class*="span4"]:nth-of-type(n+4) {
    margin-top: 10px;
  }

Answer 2

G'day Dave

Instead of useing rows and div to make a block grid try using an "unordered list"

The HTML

<ul class="row-fluid block-grid-3">
  <li>Item #1 (row #1 / column #1)</li>
  <li>Item #2 (row #1 / column #2)</li>
  <li>Item #3 (row #1 / column #3)</li>
  <li>Item #4 (row #2 / column #1)</li>
  <li>Item #5 (row #2 / column #2)</li>
  <li>Item #6 (row #2 / column #3)</li>
  <li>Item #7 (row #3 / column #1)</li>
</ul>

Then the CSS would look like this.

ul.block-grid-3 {
   display: block;
   overflow: hidden;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-3 > li {
   width: 33.33333%;
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
ul.block-grid-3 > li:nth-of-type(3n+1) {
   clear: left;
}

Then if you wanted to change to four blocks you can can change the css to:

ul.block-grid-4 > li {
   width: 25%;
   float: left;
   padding: 0 12px 12px;
   display: block;
   height: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}  
ul.block-grid-4 > li:nth-of-type(4n+1) {
   clear: left;
}

jsfiddle example a more robust solution.

You can also check out this ember app Open-pos the products are layout using this method.

Zurb's css framework "foundation" as great solution called block-grid. This there system it is super easy to change the 3 up grid other number with just a small change in the css. you could drop in the block grid code into your bootstrap scss. If you have any questions let me know.

Cheers

Answer 3

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

Here is the template:

{{#each post in posts}}
  {{#if post.first}}
    <div class="row-fluid">
  {{/if}}
    <div class="span4">
      <div class="post">
        {{post.title}}
      </div>
    </div>
  {{#if post.lastOfRow}}
    </div>
    <div class="row-fluid">
  {{/if}}
  {{#if post.last}}
    </div>
  {{/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 <td> nested in <tr>)… Even though I ended up using kiwiupover’s solution! ;-)

Regards,

D.