2013-07-11 32 views
5

我试图做一个简单的链接到谷歌地图插入到href字段中的动态地址。我已经尝试了下面的代码加上吨的其他乱搞没有运气。如何在handlebars href字段中插入动态的ember字符串?灰烬插入在车把模板中的href标记

我使用的是余烬,栏杆和把手。 我知道如何使用bindAttr,如果我有我的模型存储的整个url,但我只有地址。如果我可以在视图中调用一次,那么将Google网址与每个模型放在一起似乎都是不必要的。

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

我来修复它

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

回答

8

你可以做这样的事情,看到demo

基本上,你可以创建一个公共属性Mixin,然后在你的模型中混合它。 例如:

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

所以,你可以在以后使用它的模板是这样的:

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

希望它能帮助。

+0

谢谢!你绝对指出我正确的方向。这是我第一次一起使用所有这些技术。 Rails,Ruby,Ember,Coffeescript,Handlebars,所以我仍然有点困惑如何构建一切,但我用我添加到问题中的代码修复了它。再次感谢! –

+0

@GarrettBoone我很高兴我可以帮助,随时在这里发布更多的问题,所以我相信他们得到成功的答案:) – intuitivepixel

+0

@intuitivepixel jsbin不工作。 (不渲染模板) –