JavaScript non intrusivo con valori lato server, best practice?

Question

Sono abituato a fare fare le cose in questo modo:

<a href="Javascript:void(0);" onclick="GetCommentForGeneralObservation(<%# Eval("ID") %>)"> 

che sarebbe in un ripetitore o simili btw. Tuttavia ora sto cercando di usare JavaScript non invadente e quindi di eliminare qualsiasi JS nel markup. Stavo cercando di capire qual è la migliore pratica in casi come questo? Ho usato gli attributi e poi ho ottenuto il valore usando JQuery per passare alla chiamata AJAX ma sembra un po 'un trucco.

Modifica alla luce della prima risposta:

pensavo più del

Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation.

parte di discreto JS se ho capito bene.

Questo accade per un'applicazione in cui non devo preoccuparmi che JavaScript venga disattivato sul client, sia ospitato internamente presso la mia azienda. Quello che stavo ottenendo era come avrei ottenuto il valore da Eval ("ID") nella chiamata JS se dovessi collegare l'evento onclick in un file .js separato tramite JQuery.

Ci scusiamo per non essere più chiari. Apprezzo la necessità di un miglioramento progressivo nelle app pubbliche.

Answer 1

In HTML 5 si è permesso di definire i propri attributi con prefisso 'dati-'

esempio

<a 
class="comment" 
data-rendered-id="<%# Eval("ID") %>" 
href="/getCommentForGeneralObservation/<%# Eval("ID") %>" > 

E quindi utilizzare quell'attributo in jQuery nel gestore eventi click.

$(".comment").click(function() { 
    var id = $(this).attr("data-rendered-id"); 
    return GetCommentForGeneralObservation(id); 
}); 

Questo funzionerà anche nella maggior parte dei browser pre-HTML5 purché supportino jQuery.

Si noti che in javascript discreto si dovrebbe davvero supportare i browser non javascript, quindi è necessario un attributo href che funzioni pure.

Answer 2

Non intrusivo significa che non si dipende da Javascript per la funzionalità e quindi il codice viene esteso con Javascript anziché sostituito da esso.

Nel tuo caso, stai incorporando Javascript direttamente nel link e, peggio, il collegamento non funzionerà affatto senza Javascript abilitato. Invece si vorrà qualcosa di simile, che è HTML puro senza alcun riferimento a JavaScript:

<a id="commentLink" href="comment.asp">Get Comment</a> 

e Javascript (supponendo che non si sta usando un quadro) sarebbe qualcosa di simile:

function GetCommentForGeneralObservation(evt) { 
    // Extra javascript functionality here 
} 

document.getElementById("commentLink").onclick = GetCommentForGeneralObservation; 

con jQuery credo che si potrebbe fare solo:

$("#commentLink").click(GetCommentForGeneralObservation); 

Answer 3

mi piacerebbe iniziare con:

<a href="/getCommentForGeneralObservation/<%# Eval("ID") %>" class="getCommentForGeneralObservation"> 

e quindi collegare un gestore di eventi che sembrava qualcosa di simile:

function (event) { 
    var href = this.href; 
    var id = href.search(/\/(\d+)/); 
    return GetCommentForGeneralObservation(id); 
}; 

Answer 4

Si potrebbe voler utilizzare JQuery plugin di metadati, o la funzione dei dati di base.

http://docs.jquery.com/Core/data

http://plugins.jquery.com/project/metadata

Answer 5

ho intenzione di ri-risposta perché ho capito la domanda ora e l'approccio Io di solito uso è diverso da ciò che è stato proposto finora.

Quando non c'è modo di evitare di avere contenuti dinamici, io di solito effettuare le seguenti operazioni:

<script type="text/javascript"> 
    var myApp = {commentId:<%# Eval("ID") %>}; 
</script> 
<script type="text/javascript" src="myAppScript.js"></script> 

Ora, in myAppScript.js, è possibile utilizzare myApp["commentId"] ovunque è necessario che ID a cui fare riferimento. (Uso un dizionario per non inquinare lo spazio dei nomi globale)

Il vantaggio di questo approccio è che myAppScript.js è ancora completamente statico e quindi è possibile servirlo molto velocemente. Ha anche il vantaggio di tenere le informazioni rilevanti fuori dall'URL e puoi usare oggetti Javascript, che possono aiutare molto con dati complessi e/o difficili da analizzare.

Lo svantaggio è che richiede Javascript in linea, che non è tanto uno svantaggio a meno che tu non sia un perfezionista del web.

Mi piace molto anche l'approccio di DanSingerman, che è più adatto se i dati sono specifici per un tag.

Answer 6

Che ne dici di assicurarti che sia completamente discreto?

Nella testa del documento HTML

<script src="path/to/php/or/other/equivalent/server/side/file"></script>

Nella path/to/php/o/altro/server/side/file/equivalenti:

 var SiteServerVariablesEtc = { 
    someProperty: <?php echo "hello" ?> 
}

Nel file JS normale :

var myVar = SiteServerVariablesEtc.someProperty;

Answer 7

è possibile utilizzare l'attributo rel del tag anchor per memorizzare il valore che si desidera Assoc iate con il link.

<a href="#n" class="comment" rel="<%# Eval("ID") %>">Click Here</a> 

Quindi nel codice jQuery è possibile controllare l'attributo rel per ottenere il valore che si sta cercando.

$(".comment").click(function() { 
    return GetCommentForGeneralObservation(this.rel); 
}); 

(abbastanza sicuro che questo è accurata per jQuery, ma io sono più di un ragazzo MooTools ...)