Ember Interpolation in a href tag in handlebars template

Question

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')
)

Answer 1

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.