4

鉴于 websinte 的这种结构

<html>
  <head>
    <!-- CSS at the beginning-->
    <link/>
  </head>
  <body>
    <div id="mainContainer">
      <div id="side"></div>
      <div id="content">
         <!-- DHTML awesomeness happens here -->
      </div>
    </div>
    <!-- Scripts at the end -->
    <script/>
    <script>
         /* code that attach the JS logic to the HTML items */
    </script>
  </body>
</html>

使用普通的网络导航，页面完全呈现在 HTML 中，并遵循渐进增强的方法，最后我寻找一些特定的 id 或类，并使用 javascript 和特别是 jQuery 为它们提供动态行为。在下载外部脚本之后，此增强代码发生在正文的最后。

在#content中，发生了很多 jQuery AJAX 交互，其中一些从服务器获取其他部分视图并将它们插入到页面中，但是我必须再次查找这些 id 和类并将 javascript 对象附加到这些新元素。

这可能非常麻烦，因为您不想将控制器、事件处理程序或其他任何东西重新应用于已经拥有它们的对象。

到目前为止，我发现的唯一解决方案是放在我的部分视图中：

@if(Request.IsAjaxRequest())
{
   <script> 
       /* code that attach the JS controllers to the HTML items of this view */
   </script>
}

我认为类似的问题会发生，例如当你想要动态$('input.date').datepicker()添加新<input type="text" class="date"/>元素时，除非你重新执行 jQuery 语句，否则新元素没有日期选择器。

例如，考虑到#content我有一个<input type="text" class="date"/>：

  1. 为了使 jQuery datepicer 第一次工作，我必须在外部声明之后的$('input.date').datepicker(), 末尾调用。<body><script>

  2. 如果页面下载了新元素的部分视图<input type="text" class="date"/> ，我必须将初始化调用放在 ajax 调用的视图中。

所以我以重复的代码结束，这是我不希望在 JS 中特别想要的，因为我无法像在 C# 中那样轻松地重构代码。

这是上周让我发疯的事情，想知道是否有更好的方法来实现这一点？更好的技术，还是其他整体方法？

您如何构建您的 Web 应用程序？

亲切的问候。

PS：如果有类似.live()或.delegate()不仅与事件相关的东西会很好，不是吗？每次将某些内容添加到 DOM 时，jQuery/浏览器是否会引发任何事件？

4

2 回答 2

1

如果我理解正确，这可能只是您问题的部分答案。

关于您的示例<input type="text" class="date" />，我们在使用 jQuery 非侵入式验证的部分表单视图中遇到了类似的问题。在浏览器中加载它们时，我们必须调用$.validator.unobtrusive.parse('a form selector');以在下一次表单提交期间应用验证规则。

如果您的目标是避免重复代码，您可以使用 jq unobtrusive 验证库中的模式使您的 js 操作不显眼。所以你最终会得到看起来更像这样的 HTML：

<input type="text" class="date" data-datepicker="true" />

然后，您可以将初始化逻辑放在一个不显眼的解析方法中。

parse: function(selector) {
    $(selector).find(':input[data-datepicker=true]').each(function() {
        $(this).datepicker();
    }
};

}

这解决了您在一个地方重构代码的问题。您可以使其在页面首次加载时自动启动，并且当您通过 ajax 加载新内容时，只需调用即可将规则应用于所有匹配的元素myAppNamespace.unobtrusive.parse('selector for the partial view content');

更新

查看脚本文件夹中的 jquery.validate.unobtrusive.js 文件。它真的很聪明，如果你实际上没有扩展另一个 jquery 插件（比如 validate），你的代码最终会变得更苗条。如果您正在寻找 HTML 和脚本的完全分离，那么使用 HTML5 不显眼的数据属性是一个很好的解决方案。

于 2011-12-08T22:20:32.293 回答
0

我已将@olivehour 响应标记为正确，因为它说明了该问题的良好解决方案。

我最后做的是将jquery文件移动到头部，只有jquery文件，其余的像“jquery-ui”，或者自定义js文件仍然在底部。

原因是能够使用$(document).readyor $(function(){})，因为在视图上使用它，代码在“onload”上执行，或者如果“onload”已经提出，则代码直接执行，这对我想要的来说是完美的。

干杯。

于 2011-12-09T13:58:26.173 回答