10

画像の URL を返す次の非常に単純なハンドルバー ヘルパーがあります。

Ember.Handlebars.registerHelper 'avatarUrl', (property, options) ->
  if value = Ember.get(this, property)
    if small_url = value.small_url
      return small_url

  '/images/fallback/small_default.png'

私はこのように使用します：

<img src="{{avatarUrl avatar}}" title="displayName">

上記は機能しますが、私がやりたいのは img 要素全体を返すことです。

これはハンドルバーヘルパーで可能ですか?

4

3 に答える 3

14

細かいマニュアルから（右下）：

ヘルパーがエスケープしたくない HTML を返す場合は、必ず new を返すようにしてくださいHandlebars.SafeString。

したがって、ヘルパーが完全に形成された要素を返すようにしたい場合は<img>、HTML 文字列を作成し、次のようにラップしますHandlebars.SafeString。

Ember.Handlebars.registerHelper 'avatarImg', (property, options) ->
  # Build your <img> HTML string and leave it in result ...
  new Handlebars.SafeString(result)

そして、あなたのテンプレートであなたが持つことができるはずです:

blah blah {{avatarImg ...}} blah blah

から取得<img>します{{avatarImg ...}}。

于 2013-01-21T23:33:27.237 に答える
2

そのイメージ タグを表すビューを作成し、カスタム ヘルパー内からハンドルバー ビュー ヘルパーを呼び出すことができます。例えば：

App.AvatarView = Ember.View.extend({
  tagName: 'img',
  attributeBindings: ['src']
});

Ember.Handlebars.registerHelper('avatarUrl', function(property, options) {
  var small_url, value;
  value = Ember.get(this, 'avatarUrl');
  if (value) {
    small_url = value.small_url;
  }
  var hash = options.hash;
  hash.src = small_url || '/images/fallback/small_default.png';

  Ember.Handlebars.helpers.view.call(this, App.AvatarView, options);

});

ここに実際の例を投稿しました：http://jsbin.com/adewot/1/edit

これは、ember 独自の linkTo ヘルパーの動作に基づいています。より高度な例を見るには、こちらのソースをチェックしてください: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L83

于 2013-01-21T23:57:15.327 に答える
2

import { htmlSafe } from '@ember/string';Ember 3 の場合https://guides.emberjs.com/v3.0.0/templates/writing-helpers/#toc_escaping-html-content

safeString2.8.0 で廃止され、3.0.0 で削除されました https://emberjs.com/deprecations/v2.x/#toc_use-ember-string-htmlsafe-over-ember-handlebars-safestring

于 2018-04-27T05:14:00.717 に答える