Wie erstelle ich ein "a" -Tag mit einem mailto href und bindAttr zu einer Eigenschaft?

Question

Ich habe ein Model mit einer Eigenschaft 'contact_email'. Ich möchte einen Link mit einem mailto: href machen.

Ich habe versucht, die leicht offensichtliche <a {{bindAttr href="contact_email"}}>Email</a>, aber natürlich ist dies nicht das mailto: Bit.

Wie kann ich mailto: mit der Eigenschaft contact_email kombinieren?

Answer 1

Im Moment ist der einzige praktikable Ansatz, eine berechnete Eigenschaft zu verwenden (wie Sie in Ihrem Kommentar beschrieben).

Eine Sache, die diese erträglicher machen könnte, wenn man sich dies oft zu tun finden, ist eine berechnete Eigenschaft „Makro“ zu erstellen:

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

Dann könnten Sie dies in Ihrem Controller:

var mailto = App.computed.mailto; 

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

Answer 2

einen Lenker Helper verwenden, können für alle diese Anwendungsfälle generische Lösung für das Problem sein

überprüfen Sie die Geige 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: "test@somthing.com" }); 


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

Answer 3

registriert ein einfachen begrenzt Ember Lenker Helfer (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); 
}); 

Und es wie folgt verwenden:

simple mailto link: 
{{mailTo emailAddress}} 
(output: <a href="mailto:foobar@example.com">foobar@example.com</a>) 

mailto link with alternate label 
{{mailTo emailAddress username}} 
(output: <a href="mailto:foobar@example.com">foobar</a>) 

Modell verwendet:

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

Beiden Werte (die E-Mail-Adresse sowie die Option (alternate label) sind an das Modell gebunden und ändern sich, wenn sich das Modell ändert.

ein JSFiddle Erstellt das Ändern Modell zu demonstrieren: http://jsfiddle.net/We6B9/

Answer 4

In der neuesten Version von ember cli, können Sie es so machen könnte:

Ihrer Ansicht:

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

In Lenker Vorlage:

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

Aktuelle Einrichtung zum Zeitpunkt dieser Beitrag:

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 5

Ich schaffte es gerade dies mit Emblem zu tun wie folgt:

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

Was bedeutet, sollten Sie in der Lage sein, etwas zu tun:

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

Answer 6

Versuchen Sie, die concat Helfer:

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