Geek asks and answers

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

I find it difficult to find a way to do the following markup with Ember.Handlebars:

<div class="row-fluid">
  <div class="span4">Item #1 (row #1 / column #1)</div>
  <div class="span4">Item #2 (row #1 / column #2)</div>
  <div class="span4">Item #3 (row #1 / column #3)</div>
</div>
<div class="row-fluid">
  <div class="span4">Item #4 (row #2 / column #1)</div>
  <div class="span4">Item #5 (row #2 / column #2)</div>
  <div class="span4">Item #6 (row #2 / column #3)</div>
</div>
<div class="row-fluid">
  <div class="span4">Item #7 (row #3 / column #1)</div>
</div>

Using pure JavaScript, Id did something like this:

var array = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'],
    output = '<div class="row-fluid">';

for (var i = 0, j = array.length; i < j; i++) {
  output += '<div class="span4">' + i + '</div>';

  if ((i + 1) % 3 == 0) {
    output += '</div><div class="row-fluid">';
  }
}

output += '</div>';

Ideally, Id puts this in a special Handlebars helper (thus removing the logic from the template), but the Ember Documentation explains how to write simple helpers, and I really can't write a more complex helper block without losing property bindings.

Does anyone know what is the best way to use Twitter Bootstraps grid with Ember model collection?

Thank you in advance! Regards,

David

+5
source share
3 answers

, , .

:

{{#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}}

:

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')
});

( <td> <tr>)... , !; -)

,

.

+2

G'day Dave

div " "

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>

CSS .

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

, , css :

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 .

ember Open-pos, , .

Zurb css framework "" block-grid. 3- css. scss . - , .

+5

, posts, , / posts. , , , , .

In my case, I decided to override bootstrap css; however, you will need to consider different screen sizes with additional media queries.

Here are the rules for targeting the largest grid and make sure that 3 span4(note that it was BS 2.3.2) are correctly aligned on each "line", but inside one 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;
  }
0
source

More articles:


All Articles