O'Reilly logo

Mastering Ember.js by Mitchel Kelonye

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Customizing a component's element attributes

A component's element attribute values can also be bound to properties using the attributeBindings property. For example, consider our post-photo component that displays the images as:

App.PostPhotoComponent = Ember.Component.extend({
  tagName: 'img',
  classNames: ['avatar'], 
  attributeBindings: ['src'],
  src: Ember.computed.oneWay('photo')
});

First, we use the tagName property to specify that its element is an image tag. We also specify that this element will have an src attribute that will be aliased to the bound photo property. The user-post component then uses this component to display the images as:

{{post-photo photo=post.photo}}

Be sure to compare how the following element concepts are customized across ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required