Question

我习惯这样做：

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

那将是转发器或类似顺便说一句。但是我现在试图使用不引人注目的JavaScript，因此摆脱了标记中的任何JS。我试图弄清楚这样的情况下最佳做法是什么？我已经使用了属性，然后使用JQuery将值传递给AJAX调用，但它看起来有点像黑客。

根据第一回复编辑：

我在考虑更多

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

我理解它的一部分不引人注目的JS。

这恰好适用于我不必担心Javascript在客户端关闭的应用程序，它在我公司内部托管。我得到的是如果我通过JQuery将onclick事件附加到单独的.js文件中，我将如何从Eval（“ID”）获取值到JS调用中。

抱歉不清楚。我很欣赏在面向公众的应用程序中逐步增强的必要性。

Answer 1

在HTML 5中，您可以定义自己的前缀为“data - ”

的属性

e.g。

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

然后在点击事件处理程序中使用jQuery中的该属性。

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

只要它们支持jQuery，这在大多数HTML5之前的浏览器中都有效。

请注意，在不引人注目的javascript中，你真的应该支持非JavaScript浏览器，因此你需要一个同样适用的href属性。

Answer 2

我从：

开始

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

然后附加一个看起来像这样的事件处理程序：

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

Answer 3

Unobtrusive意味着您不依赖于Javascript的功能，因此您的代码使用Javascript进行扩展而不是替换它。

在您的情况下，您直接在链接中嵌入Javascript，更糟糕的是，如果没有启用Javascript，链接将无法正常工作。相反，你会想要这样的东西，这是纯HTML而不引用Javascript：

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

你的Javascript（假设你没有使用框架）就像是：

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

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

使用Jquery我相信你可以做到：

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

Answer 4

我将重新回答这个问题，因为我现在理解这个问题，而且我通常使用的方法与目前建议的方法不同。

如果无法避免使用动态内容，我通常会执行以下操作：

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

现在，在myAppScript.js中，您可以在需要引用该ID的任何地方使用myApp["commentId"]。（我使用字典以免污染全局命名空间）

这种方法的优点是myAppScript.js仍然是完全静态的，因此您可以非常快速地提供服务。它还具有将相关信息保留在URL之外的优点，您可以使用Javascript对象，这可以帮助解决复杂和/或难以解析的数据。

缺点是它需要内联Javascript，除非你是一个网络完美主义者，否则这不是一个缺点。

我也非常喜欢DanSingerman的方法，如果您的数据特定于标签，则更适合。

Answer 5

您可能希望使用JQuery元数据插件或核心数据功能。

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

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

Answer 6

您可以使用rel标记的anchor属性来存储要与链接关联的值。

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

然后在您的jQuery代码中，您可以检查rel属性以获取您正在寻找的值。

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

（很确定这对jQuery来说是准确的，但我更像是一个MooTools家伙......）

Answer 7

如何确保它完全不引人注目？

在HTML文档的头部

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

在路径/ / php /或/ other / equivalent / server / side / file中：

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

在普通的JS文件中：

var myVar = SiteServerVariablesEtc.someProperty;

具有服务器端值的不引人注目的JavaScript，最佳实践？

7 个答案: