2013-01-14 60 views
8

我有一个模型,有一个属性'contact_email'。我想用mailto:href进行链接。如何制作带有mailto href和bindAttr属性的'a'标签?

我试过做稍微明显的<a {{bindAttr href="contact_email"}}>Email</a>,但当然这不是mailto:位。

如何将mailto:与属性contact_email结合使用?

+0

我可以做不雅的事情,只是有一个名为mailto_contact_email的属性,连接mailto:'this.get('contact_email')'。看起来像车把必须有一种区分方式,我只是无法找到它。 –

+0

如果您直接从模型中加载电子邮件地址并在您的应用程序中使用较旧的把手,则__可以在您的视图中使用“Send email”。但是,如果您需要在视图中动态绑定/更新,请使用与我提供的语法相同的语法查看支持此功能的新HTMLBars功能。 – DelphiLynx

回答

10

目前,唯一可行的方法是使用计算属性(如您在评论中所述)。

一两件事,可能使这更容忍的,如果你发现自己经常这样做,是创建一个计算属性“宏”:

App.computed.mailto = function(property) { 
    return function() { 
    return "mailto:" + this.get(property); 
    }.property(property); 
}; 

然后,你可以在你的控制器做到这一点:

var mailto = App.computed.mailto; 

App.UserController = Ember.ObjectController.extend({ 
    mailtoContactEmail: mailto('contactEmail') 
}); 
+0

如何使用Handlebar Helper进行操作? –

+0

您不能将handleBars助手放在bindAttr中的值的内部,这样就无法工作。 –

+0

我写过一个手柄帮手。目前,我无法处理帮助器中的值绑定。有没有什么好的方法可以做到这一点?检查出来http://jsfiddle.net/devilankur18/YgLRb/2/ –

0

使用车把助手是可以通用的解决问题的方法对于所有此类用途的情况下

检查小提琴http://jsfiddle.net/devilankur18/YgLRb/1/

var getBindingValue = function(context, options, path) { 

    var normalized = Ember.Handlebars.normalizePath(null, path, options.data), 
     thisContext; 

    if (normalized.isKeyword) { 
    thisContext = normalized.root; 
    } else if (!Ember.isGlobalPath(path)) { 
    thisContext = context; 
    } else { 
    thisContext = null; 
    } 

    return Em.Handlebars.get(thisContext, normalized.path); 

}; 

Handlebars.registerHelper('mail_to', function(context, options) { 
     var value = getBindingValue(this, options, context); 

      return 'href=mailto:' + value 

}); 

var App = Ember.Application.create(); 
App.ApplicationController = Ember.Controller.extend({ email: "[email protected]" }); 


App.Router = Ember.Router.extend({ 
    enableLogging: true, 
    root: Ember.Route.extend({ 
    index: Ember.Route.extend({ 
     route: '/' 
    }) 
    }) 
}); 
5

注册一个简单的界定灰烬把手帮手(Em.Handlebars.registerBoundHelper

Em.Handlebars.registerBoundHelper('mailTo', function (emailAddress, label) { 
    emailAddress = Em.Handlebars.Utils.escapeExpression(emailAddress); 
    label = (arguments.length == 2) ? emailAddress : Em.Handlebars.Utils.escapeExpression(label); 

    var link = '<a href="mailto:' + emailAddress + '">' + label + '</a>'; 
    return new Em.Handlebars.SafeString(link); 
}); 

而且像这样使用:使用

simple mailto link: 
{{mailTo emailAddress}} 
(output: <a href="mailto:[email protected]">[email protected]</a>) 

mailto link with alternate label 
{{mailTo emailAddress username}} 
(output: <a href="mailto:[email protected]">foobar</a>) 

型号:

App.User = DS.Model.extend({ 
    username: DS.attr('string'), 
    emailAddress: DS.attr('string') 
}); 

两个值(电子邮件地址以及选项al替代标签)与模型有界,并且只要模型改变就会改变。

创建一个的jsfiddle演示变化模型:http://jsfiddle.net/We6B9/

3

ember cli最新版本,你可以做这样的:

在你看来:

export default Ember.View.extend({ 
    layoutName: 'layouts/legal', 
    templateName: 'views/legal/tou', 
    tagName: 'main', 
    classNames: 'view-legal-wrapper', 
    varViewTitle: 'Terms and Conditions', 
    varCompanySupportEmail: '[email protected]' 
}); 

在你的车把模板:

<a href="mailto:{{unbound view.varCompanySupportEmail}}?subject=Support%20Request">{{view.varCompanySupportEmail}}</a> 

这个帖子时的电流设置:

DEBUG: ------------------------------- 
DEBUG: Ember  : 1.5.1 
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba 
DEBUG: Handlebars : 1.3.0 
DEBUG: jQuery  : 2.1.1 
DEBUG: ------------------------------- 
0

我好不容易才做到这一点使用徽记如下:

a href="mailto:{{unbound email}}" Email 

这意味着你应该能够做这样的事情:

<a href="mailto:{{unbound email}}">Email</a> 
0

尝试concat帮手:

<a href={{concat "mailto:" model.emailAddress}}>{{model.emailAddress}}</a>

相关问题