如何使用 mailto href 制作 'a' 标记并将 bindAttr 绑定到属性？

Question

我有一个模型，具有属性'contact_email'。我想做一个链接与mailto: href.

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

我如何结合mailto:与属性contact_email?

Answer 1

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

如果您发现自己经常这样做，可以创建一个计算属性"macro":

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

Answer 2

注册一个简单的有界Ember Handlebars助手(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:[e-mail]">[e-mail]</a>)
mailto link with alternate label
{{mailTo emailAddress username}}
(output: <a href="mailto:[e-mail]">foobar</a>)

使用

模型:

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

这两个值(电子邮件地址以及可选的备用标签)都与模型绑定，并且会在模型更改时更改。

创建一个JSFiddle来演示更改的模型:http://jsfiddle.net/We6B9/

Answer 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: '[e-mail]'
});

在你的车把模板中:

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

Answer 4

使用Handlebar Helper可以是所有这些用例问题的通用解决方案

检查小提琴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: "[e-mail]" });

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

Answer 5

我只是设法做到这一点使用徽章如下:

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

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

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

Answer 6

试试concat助手:

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