Ember Interpolation in a href tag in handlebars template

ember.js, handlebars.js, string-interpolation

Solution

You could do something like this, see demo.

Basically you could create a `Mixin` for common properties and then mix it in your models. For example:

App.BaseModel = Ember.Mixin.create({
  base: 'http://maps.google.com/?q=',
  fullAddress: function(){
    return this.get('base') + this.get('address');
  }.property('address')
});

App.MyModel = DS.Model.extend(App.BaseModel, {
  name: DS.attr('string'),
  address: DS.attr('string')
});

So you could later use it in you templates like this:

{{#each model}}
<h1>{{name}}</h1>
  <div>
    <p><a {{bind-attr href='fullAddress'}}>{{address}}</a></p>
  </div>
{{/each}}

Hope it helps.

Problem

I am trying to make a simple link to google maps with a dynamic address inserted into the href field. I have tried the code below plus tons of other messing around with no luck. How do you interpolate a dynamic ember string in a handlebars href field? I am using ember,rails, and handlebars. I know how to use bindAttr if I had the entire url stored with my model but I only have the address. Putting the google url with every model seemed unnecessary if i could just call it once in the view. ``` <h1>{{name}}</h1> <div> <p><a {{bindAttr href='http://maps.com/?1=address'}}>{{address}}</a></p> </div> <h1>{{name}}</h1> <div> <p><a href='http://maps.google.com/?q={{address}}'>{{address}}</a></p> </div> ``` What I used to Fix it ``` App.Location = DS.Model.extend( name: DS.attr('string', defaultValue: "") address: DS.attr('string', defaultValue: "") fullAddress: (-> "http://maps.google.com/?q=#{@get('address')}" ).property('address') ) ```

Original source