В шаблонах Ember.js, как распечатать свойство модели, которое будет использоваться HTML, как src для изображения или href для ссылки

Использование:

ember: v1.0.0-pre.4
ember-data: версия 11
handlebars: 1.0.rc2

Итак, у меня есть шаблон, который я подключил к контроллеру, который получает информацию от REST API. Просто напечатайте текст, это прекрасно, но это выражение руля...

<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 и Handlebars.

Я попытался выполнить поиск "рендеринга URL-адресов в шаблонах ember" и "распечатать html в шаблонах уэльских усов". Ack, вероятно, очевидно, но я пропустил его.

Ответ 1

попробуйте следующее:

<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

но первый метод, как правило, лучший.

Ответ 2

Принимая это немного дальше, чтобы ваши ноги были еще более влажными, мы можем фактически создать представление, представляющее изображение, и использовать его для добавления дополнительных функций.

Например, в следующем JSFiddle Я установил представление tagName в img (где его значение по умолчанию - div), а затем добавил attributeBindings для привязки атрибутов к представлению. В нашем случае мы хотим привязываться к атрибуту src. Все, что нам нужно сделать, это указать атрибут src как свойство представления и присвоить ему значение по умолчанию - в этом примере Google.

Поэтому представление работает так, как ожидалось: мы отобразили изображение как часть представления.

Однако, сделав еще один шаг, мы теперь можем легко изменить атрибут src с помощью метода .set(). В волшебном событии click, которое вызывается, когда пользователь нажимает на представление в DOM (попробуйте сами, нажав на логотип Google в JSFiddle!), Атрибут 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'); 
    }
});