2

Handlebars ヘルパーを使用して一連のオブジェクトを解析しています。返された結果を #linkTo 呼び出しでラップして、Embers ルーターが取得できるようにしたいと考えています。

ビューでそれを呼び出す方法は次のとおりです。 {{buildBreadcrumb my_objects}}

私のヘルパーは次のようになります。

Ember.Handlebars.registerHelper 'buildBreadcrumb', (val, opts) ->
  value = Ember.get(this, val)
  out = ""
  value.forEach (group, index) =>
    if value.length - index == 2
      out += '{{#linkTo group ' + group.name + '}}'
    if value.length - index == 1
      out += '{{#linkTo group ' + group.name + '}}'
  out

上記は{{#linkTo ...}}、明らかな理由から、をリテラル文字列として解析するだけです。私が探している方法で解析する方法はありますか? ビュー自体で {{#each}} などを使用できるという事実をよく知っていますが、私のユースケースのために、ヘルパーを使用してこれを構築する必要があります。助言がありますか？

4

1 に答える 1

2

カスタムの Handlebars ビュー ヘルパーを作成できます。そのビューは#eachロジックをカプセル化できますが、最終的なヘルパーはここにあるものとほとんど同じように見えます. 使用上の唯一の違いは、引数を属性として View ヘルパーに渡す必要があることです。

このヘルパーを作成する方法は、ヘルパー関数の代わりに View クラスを渡すことです。

App.BreadcrumbView = Ember.View.extend({
  templateName: 'breadcrumb',
  penultimate: function() {
    var length = this.get('items').length;
    return this.get('items')[length - 2];
  }.property('items'),
  last: function() {
    var length = this.get('items').length;
    return this.get('items')[length - 1];
  }.property('items')
});

Ember.Handlebars.helper('breadcrumb', App.BreadcrumbView);

そして、対応するテンプレート、

<script type='text/x-handlebars' data-template-name='breadcrumb'>
  <ul class="breadcrumb">
    {{#each item in view.items}}
      <li>{{#linkTo 'group' item}}{{item.id}}{{/linkTo}} &raquo;
      </li>
    {{/each}}
  </ul>    
</script>

アプリでヘルパーを使用するには、

<script type='text/x-handlebars' data-template-name='breadcrumb'>
  <ul class="breadcrumb">
    <li>{{#linkTo 'group' view.penultimate}}{{view.penultimate.id}}{{/linkTo}} &raquo;</li>
    <li>{{#linkTo 'group' view.last}}{{view.last.id}}{{/linkTo}}</li>
  </ul>    
</script>

このアプローチの利点は、バインディングが自動的に接続されるため、アイテム データを変更するとブレッドクラム ビューが自動更新され、内部のメタモーフィングが保持されることです。

jsbinの例を次に示します。

于 2013-06-30T07:12:39.207 に答える