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

Ответ 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'); 
    }
});