11

使用：

  • 残り火：v1.0.0-pre.4
  • 残り火データ：リビジョン11
  • ハンドルバー：1.0.rc2

そのため、RESTAPIから情報を受信するコントローラーに接続したテンプレートがあります。テキストを印刷するだけで、これは問題ありませんが、これらのハンドルバー式は...

<img src="{{ imageUrl }}"/>

... domに挿入すると、次のようになります。

<img src="&lt;script id='metamorph-28-start' type='text/x-placeholder'&gt;&lt;/script&gt;http://asdf.com/image.jpg&lt;script id='metamorph-28-end' type='text/x-placeholder'&gt;&lt;/script&gt;">

私は明らかにEmber.jsとハンドルバーに非常に慣れていません。

「残り火のテンプレートでURLをレンダリングする」と「残り火の口ひげのテンプレートでhtmlを出力する」を検索してみました。確かに、おそらく明らかですが、私はそれを見逃しています。

4

2 に答える 2

29

これを試して：

<img {{bind-attr src="imageUrl"}} />

ただし、次のような属性を複数持つことができます。

<img {{bind-attr src="imageUrl" alt="imageTitle"}}>

ここにドキュメントがあります：http：//emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_bind-attr

また、変数をバインドする必要がない場合に役立つことがあります。次のように使用できます。

<img src="{{unbound imageUrl}}" />

ドキュメントを参照してください：http：//emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_unbound

ただし、通常は最初の方法が最適です。

于 2013-01-29T19:11:56.503 に答える
2

これをもう少し進めて足をさらに濡らすと、実際に画像を表すビューを作成し、それを使用して機能を追加することができます。

たとえば、次のJSFiddleでは、ビューのtagNameをimg（デフォルトは）に設定してから、属性をビューにバインドするためのをdiv追加しました。attributeBindingsこの場合、src属性にバインドします。次に行う必要があるのは、src属性をビューのプロパティとして指定し、デフォルト値（この例ではGoogle）を指定することだけです。

したがって、ビューは期待どおりに機能します。ビューの一部として画像を表示しました。

ただし、さらに一歩進んで、このメソッドsrcを使用して画像の属性を簡単に変更できるようになりました.set()。ユーザーがDOMのビューをクリックしたときに呼び出される魔法のclickイベント（JSFiddleでGoogleのロゴをクリックして試してみてください！）では、src属性がGoogleのロゴからYahooのロゴに変更されます。srcから属性を監視しているのでattributeBindings、これを呼び出すとすぐに更新されます。

this.set('src', 'http://l.yimg.com/dh/ap/default/120910/yahoo_logo_br.png');

JSFiddleが消えた場合のフルビューコード：

App.ImageView = Ember.View.extend({
    tagName: 'img',
    attributeBindings: ['src'],
    src: 'https://www.google.com/images/srpr/logo3w.png',
    click: function() {
        this.set('src', 'http://l.yimg.com/dh/ap/default/120910/yahoo_logo_br.png'); 
    }
});
于 2013-01-29T19:50:11.200 に答える