読者です 読者をやめる 読者になる 読者になる

Ember.js link-to helper メモ

イシュー

  • Ember.jsの link-to helperの仕様についてのメモ
  • handlebarsのパラメータの書き方と仕様を理解する

参考

Router.map(function() {
  this.route("photos", function(){
    this.route("edit", { path: "/:photo_id" });
  });
});
  • hbs
<ul>html
  {{#each photo in photos}}
    <li>{{#link-to 'photos.edit' photo}}{{photo.title}}{{/link-to}}</li>
  {{/each}}
</ul>

If the model for the photos template is a list of three photos, the rendered HTML would look something like this: * もしphotosテンプレートのモデルは3つのphotosのリストである場合、レンダリングされたHTMLは次のようになります

<ul>
  <li><a href="/photos/1">Happy Kittens</a></li>
  <li><a href="/photos/2">Puppy Running</a></li>
  <li><a href="/photos/3">Mountain Landscape</a></li>
</ul>

When the rendered link matches the current route, and the same object instance is passed into the helper, then the link is given class="active".

  • レンダリングされたリンクが現在のルートと一致し、同じオブジェクトのインスタンスがヘルパーに渡されると、リンクは、class="active"を付与されます。
    • (これは自動で行なわれて便利)
  • The name of a route. In this example, it would be index, photos, or photos.edit.
  • At most one model for each dynamic segment. By default, Ember.js will replace each segment with the value of the corresponding object's id property. If there is no model to pass to the helper, you can provide an explicit identifier value instead. The value will be filled into the dynamic segment of the route, and will make sure that the model hook is triggered.
  • An optional title which will be bound to the a title attribute
  • ルートの名前。この例では、index、phots、またはphotos.editのいずれかです。
  • それぞれの動的セグメントは多くても1つのモデルです。デフォルトでは、Ember.jsは、対応するオブジェクトのidプロパティの値を持つ各セグメントに置き換えられます。ヘルパーに渡すモデルが存在しない場合は、代わりに明示的な識別子の値を提供することができます。値は、ルートの動的セグメント内に充填され、モデルのフックがトリガされていることを確認します。
  • オプショナルなタイトルとして、title属性がバインドされます。

パラメータ

  • hbsの第一引数は、router.js の routeの連想配列要素を文字列で記載
  • hbsの第二引数は、app/routes/photos.js で返すモデルを指定

each ヘルパーの書き方

  • each の書き方で duplicate エラーがでるので正しい書き方に修正する

    参考

  • Ember.js - Deprecations for v1.x

    The in syntax is used to name an iterated value with {{each}}. Block params, introduced Ember 1.10, obsoletes the in syntax. Each helpers should be updated to use block params. For example this helper:

    • in 構文は、{{each}}内の反復値の名前として使用されています。Block paramsが、Ember 1.10で導入されたため、in 構文は廃止されます。
    • 各ヘルパーは、block paramsを使用するために更新する必要があります。例えば、このヘルパーは:
{{#each foo in bar}}

Can be converted as follows * 次のように変換することが出来ます。

{{#each bar as |foo|}}