0

私はハンドルバーを使用しています {{#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}}

しかし、インスペクターで変数「インデックス」を表示すると、値ではなく「_view.contentIndex」のみが文字列として表示されます。

これを行う簡単な方法があれば、教えてください。

Ember 1.9.1 ハンドルバー 2.0.0

4

1 に答える 1

0

{{#each}}データをグループ化して2つのブロックを使用するのが最善だと思います。

次のようなことを試してください：

テンプレート：

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

アップデート

この例には、元の質問により似たアクションとマークアップが含まれています。

テンプレート：index 
{{#each group in groupedItems}}
  <div class="row">
    {{#each item in group}}
      {{render 'post' item}}
    {{/each}}
  </div>
{{/each}}
テンプレート：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>
于 2015-03-09T06:33:29.200 に答える