Ember, оберните столбцы в строки с помощью рулей {{#each}}

Я использую руль {{#each}}. Мне нужно преобразовать это:

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

В это:

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

Регистрирую хелперы руля:

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

Как передать текущий индекс этим помощникам? Я пытаюсь сделать это следующим образом:

 {{#isFourthOpen _view.contentIndex}}

Но когда я просматриваю переменную «index» в инспекторе, я вижу только «_view.contentIndex» как строку, а не значение.

Если у кого-то есть менее сложный способ сделать это, пожалуйста, скажите мне.

Эмбер 1.9.1 Руль 2.0.0


handlebars.js ember.js client-side-templating
person Dallum    schedule 09.03.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, вам лучше сгруппировать данные и использовать 2 блока {{#each}}.

Попробуйте что-то вроде этого:

Шаблон:

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

Контроллер:

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

Вот полный рабочий пример с использованием пользовательского макроса вычисляемого свойства: http://emberjs.jsbin.com/rapugivavi/3/edit?html,js,output

ОБНОВИТЬ

Этот пример включает действия и разметку, более похожие на исходный вопрос.

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>
person Amiel Martin    schedule 09.03.2015
comment
Не могли бы Вы уточнить? Что сломано? - person Amiel Martin; 09.03.2015
comment
Модель в данном случае - выбор из магазина. А в блоке {{#each}} я использую некоторые действия для работы с элементами модели. Если я создам группы на уровне контроллера, действия не будут работать. - person Dallum; 09.03.2015
comment
Я не понимаю. Можешь сделать jsbin с примером того, что не работает? - person Amiel Martin; 09.03.2015
comment
jsbin.com/juguni/2/edit?html,js,output Это не работает, но я надеюсь, что это объясняет, о каких действиях я говорю - person Dallum; 09.03.2015
comment
Хм, я не вижу там никакого JavaScript. Вы сохранили снимок? Также обратите внимание, что хорошей отправной точкой является emberjs.jsbin.com. - person Amiel Martin; 09.03.2015
comment
Ах, я думаю, что ваша проблема с действиями - это просто проблема с разметкой. <div> не является дочерним элементом <ul>, и у вас нет контента в ваших тегах <a {{action...}}>. - person Amiel Martin; 09.03.2015
comment
Я обновлю свой пример, чтобы включить действия и добавить новую ссылку jsbin. - person Amiel Martin; 09.03.2015