Ho un modello, con una proprietà 'contact_email'. Mi piacerebbe creare un collegamento con un mailto: href.Come posso creare un tag "a" con un mailto href e bindAttr su una proprietà?
Ho provato a fare il leggermente ovvio <a {{bindAttr href="contact_email"}}>Email</a> ma ovviamente questo non ha il mailto: bit.
Come posso combinare mailto: con la proprietà contact_email?
Al momento, l'unico approccio praticabile consiste nell'utilizzare una proprietà calcolata (come descritto nel commento).
Una cosa che potrebbe rendere questo più tollerabile, se vi trovate a fare questo, spesso, è quello di creare una proprietà calcolata "macro":
App.computed.mailto = function(property) {
return function() {
return "mailto:" + this.get(property);
}.property(property);
};
allora si potrebbe fare questo nel controller:
var mailto = App.computed.mailto;
App.UserController = Ember.ObjectController.extend({
mailtoContactEmail: mailto('contactEmail')
});
Che ne dici di usare un helper per manubrio per questo? –
Non è possibile inserire gli helper dei manubri all'interno dei valori in bindAttr, in modo che non funzionino. –
Ho scritto un aiutante per manubrio. Corrente Non sono in grado di gestire il binding di valore all'interno degli helper. C'è un buon modo per farlo? Controlla questo http://jsfiddle.net/devilankur18/YgLRb/2/ –
Utilizzando un aiutante del manubrio può essere soluzione generica per il problema per tutti i casi di utilizzo
Controlla il violino 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: '/'
})
})
});
Registra un semplice delimitata Ember Manubrio helper (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);
});
e usarlo in questo modo:
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>)
Modello usato:
App.User = DS.Model.extend({
username: DS.attr('string'),
emailAddress: DS.attr('string')
});
Entrambi i valori (l'indirizzo email e l'opzione al alternativa etichetta) sono legati al modello e cambieranno ogni volta che il modello cambia.
creato una JSFiddle per dimostrare il modello che cambia: http://jsfiddle.net/We6B9/
Nella versione più recente di ember cli, si potrebbe fare così:
Secondo lei:
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]'
});
In manubrio modello:
<a href="mailto:{{unbound view.varCompanySupportEmail}}?subject=Support%20Request">{{view.varCompanySupportEmail}}</a>
configurazione attuale, al momento di questo post:
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: -------------------------------
ho appena riuscito a farlo usando emblema come segue:
a href="mailto:{{unbound email}}" Email
Il che significa che dovrebbe essere in grado di fare qualcosa di simile:
<a href="mailto:{{unbound email}}">Email</a>
provare il concat aiutante:
<a href={{concat "mailto:" model.emailAddress}}>{{model.emailAddress}}</a>
Potrei fare la cosa inelegante e avere solo una proprietà chiamata mailto_contact_email che concilia mailto: con 'this.get ('contact_email')'. Sembra che il manubrio debba avere un modo di distinguere e io proprio non riesco a trovarlo. –
Se si carica direttamente l'indirizzo e-mail da un modello e si utilizza il manubrio più vecchio nell'app, __can__ si utilizza 'Send email' nella propria vista. Tuttavia, se hai bisogno di un binding/aggiornamento dinamico all'interno della vista, guarda le nuove funzionalità di HTMLBar che supportano anche questo con la stessa sintassi che ho fornito. – DelphiLynx