Ember, wrap cols in rows with handlebars {{#each}}

Question

I use handlebars {{#each}} I need to transform this:

<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>

Into this:

<div class="row">
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
</div>
<div class="row">
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
</div>
<div class="row">
<div class="col-lg-4">{{somevalue}}</div>
<div class="col-lg-4">{{somevalue}}</div>
</div>

I register handlebars helpers:

Handlebars.registerHelper('isFourthOpen', function (index, opts) {
    if ((index + 1) % 3 == 1)
        return opts.fn(this);
    else
        return opts.inverse(this);
});

Handlebars.registerHelper('isFourthClose', function (index, opts) {
    if ((index + 1) % 3 == 0)
        return opts.fn(this);
    else
        return opts.inverse(this);
});

How to pass a current index to this helpers? I try to do it this way:

 {{#isFourthOpen _view.contentIndex}}

But when i view variable "index" in inspector, i see only "_view.contentIndex" as string, not value.

If anybody have less complicated way to do this, please tell me.

Ember 1.9.1 Handlebars 2.0.0

Amiel Martin · Answer 1 · 2015-03-09T16:50:43.133

0

I think you'd be best off grouping your data and using 2 {{#each}} blocks.

Try something like this:

Template:

{{#each group in groupedItems}}
  <ul>
    {{#each item in group}}
      <li>{{item}}</li>
    {{/each}}
  </ul>
{{/each}}

Controller:

App.IndexController = Ember.Controller.extend({
  groupSize: 3,
  groupedItems: Ember.computed('items.[]', function() {
    var items = this.get('model');
    var grouped = [];
    var groupSize = this.get('groupSize');

    items.forEach(function(item, index) {
      if (index % groupSize === 0) grouped.pushObject([]);
      grouped.get('lastObject').pushObject(item);
    });

    return grouped;
  })
});

Here is a full working example, using a custom computed property macro: http://emberjs.jsbin.com/rapugivavi/3/edit?html,js,output

UPDATE

This example includes actions and markup more similar to the original question.

Template: index

{{#each group in groupedItems}}
  <div class="row">
    {{#each item in group}}
      {{render 'post' item}}
    {{/each}}
  </div>
{{/each}}

Template: post

<div {{bind-attr class=":item isEditing"}}>
  {{model}}

  <div class="actions">
    {{#if isEditing}}
      <a {{action "doneEditing"}}>Done</a>
    {{else}}
      <a {{action "edit"}}>Edit</a>
    {{/if}}
  </div>
</div>

edited Mar 09 '15 at 16:50

answered Mar 09 '15 at 06:33

Amiel Martin

4,636
1
29
28

Could you be more specific? What is broken? – Amiel Martin Mar 09 '15 at 07:19
Model in this case - selection from store. And in {{#each}} block i use some actions to work with model items. If i make groups in controller level, actions will not work. – Dallum Mar 09 '15 at 07:26
I don't understand. Can you make a jsbin with an example of what is not working? – Amiel Martin Mar 09 '15 at 07:33
http://jsbin.com/juguni/2/edit?html,js,output This doesn't work, but i hope it explain what actions i'm talking about – Dallum Mar 09 '15 at 07:44
Hmmm, I don't see any JavaScript there. Did you save a snapshot? Also note that http://emberjs.jsbin.com is a good starting point – Amiel Martin Mar 09 '15 at 08:02
Ah, I think your issue with actions is just a markup issue. `
` is not a valid child of `
`, and you have no content in your `` tags.
– Amiel Martin Mar 09 '15 at 16:47
I'll update my example to include actions and add a new jsbin link. – Amiel Martin Mar 09 '15 at 16:47

Ember, wrap cols in rows with handlebars {{#each}}

1 Answers1

UPDATE