4

リンク先ヘルパーのスタイルを設定したいのですが、方法がよくわかりません。

私は次のモデルを持っています：

App.ArtistFavorite = DS.Model.extend
  name: DS.attr 'string'
  image_url: DS.attr 'string'

私のテンプレート:

li
  link-to 'artistFavorite' this {bind-attr style="background-image: url('image-url');"}

しかし、バインド属性は機能していないようです

ところで：私はemblemjsとcoffeescriptを使用しています

4

1 に答える 1

3

link-toは Ember ビュー ヘルパーであるため、(これに触発されて) を使用attributeBindingsすることを最初に提案するつもりでしたが、次の JS エラーが発生します。

ハンドルバー経由で「attributeBindings」を設定することは許可されていません。Ember.View をサブクラス化し、代わりに設定してください。

本当にこの方法で属性を設定する必要がある場合は、クラスを再度開いて設定することで実行できるように見えますが、これはページのすべてに影響することに注意してください。Ember.LinkViewattributeBindingslink-to

ただし、設定する必要がある唯一の属性が (表示されているように) である場合はstyle、目的のスタイルで CSS クラスを作成し、ここclassNamesで説明するように を設定するだけです。

{{#link-to 'artistFavorite' this classNames="your-class-name"}}

コード スタイルの観点からは、(より簡単に)style属性を直接設定できる場合でも、このアプローチを使用します。

編集：対応するアイテムの属性の1つを使用して各リンクのスタイルを個別に設定しようとしていることに気付いたので、明らかにCSSクラスは機能しません。私はこれについてもう少し考えました。

お勧めしませんが、クラスをstyle再度開いてに追加することで、属性にバインドできるはずです。LinkViewstyleattributeBindings

Ember.LinkView.reopen({
  attributeBindings: ["style"]
})

次に、属性の値を設定できstyleます。

{{#link-to 'artistFavorite' this style=favStyle}}

モデルまたは（理想的には）コントローラーfavStyleの計算されたプロパティは次のとおりです。

favStyle: function() {
  return "background-image: url('" + this.get('image_url') + "');";
}.property('image_url')

ただし、私はこれをテストしておらず、これらのバインディングは通常、プロパティではなくプレーンテキストに使用されるため、バインディングがこの方法で正しく機能することを 100% 確信しているわけではありません。

于 2013-09-24T21:19:54.713 に答える