2013-01-14 9 views
8

Mam model z właściwością "contact_email". Chciałbym utworzyć łącze z mailto: href.Jak utworzyć znacznik "a" za pomocą atrybutu mailto href i bindAttr do usługi?

Próbowałem zrobić nieco oczywiste <a {{bindAttr href="contact_email"}}>Email</a>, ale oczywiście to nie ma bitów mailto :.

Jak mogę połączyć mailto: z właściwością contact_email?

+0

Mogłem zrobić rzecz nieelegancką i po prostu mam właściwość o nazwie mailto_contact_email, która konkatuje mailto: z 'this.get ('contact_email')'. Wygląda na to, że kierownica musi mieć sposób na odróżnienie i po prostu nie mogę jej znaleźć. –

+0

Jeśli bezpośrednio załadujesz adres e-mail z modelu i użyjesz starszej kierownicy w twojej aplikacji, to w twoim widoku będziesz używał 'Send email'. Jeśli jednak potrzebujesz dynamicznie wiązać/aktualizować w widoku, spójrz na nowe funkcje HTMLBars, które obsługują to również z tą samą składnią, co podałem. – DelphiLynx

Odpowiedz

10

W tej chwili jedynym praktycznym podejściem jest użycie właściwości obliczeniowej (jak opisano w komentarzu).

Jedną rzeczą, która może uczynić to bardziej znośny, jeśli znajdziesz się robić to często, jest stworzenie komputerowej właściwość „makro”:

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

Następnie można zrobić to w kontrolerze:

var mailto = App.computed.mailto; 

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

Co powiesz na użycie Pomocnika kierownicy? –

+0

Nie można umieścić pomocników kierownicy wewnątrz wartości w bindAttr, więc to nie zadziała. –

+0

Napisałem pomocnika kierownicy. Obecnie nie jestem w stanie obsłużyć wiązania wewnątrz pomocników. Czy jest jakiś dobry sposób na zrobienie tego? Sprawdź to http://jsfiddle.net/devilankur18/YgLRb/2/ –

0

Korzystanie z kierownica Helper może mieć charakter ogólny rozwiązanie problemu dla wszystkich takich przypadków użycia

sprawdzić skrzypce 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

Zarejestruj prosty ograniczony Ember Kierownice pomocnika (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); 
}); 

i używać go tak:

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

Użyty model:

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

Obie wartości (adres e-mail, jak również opcja al alternatywna etykieta) są powiązane z modelem i zmieniają się w każdym przypadku zmiany modelu.

Utworzony JSFiddle do wykazania zmian modelu: http://jsfiddle.net/We6B9/

3

W najnowszej wersji ember cli, można zrobić to tak:

w widoku:

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

w twojej kierownicy szablon:

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

Aktualna konfiguracja w czasie tego postu:

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

Właśnie udało się to zrobić przy użyciu emblemat następująco:

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

co oznacza, powinieneś być w stanie zrobić coś takiego:

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

Spróbuj concat pomocnika:

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

Powiązane problemy