Question

给出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"/>：

为了让jQuery datepicer第一次工作，我必须这样做在$('input.date').datepicker()的末尾拨打<body>，在外部<script>声明之后。
如果页面下载部分视图新的<input type="text" class="date"/> 我必须在视图中为ajax放置初始化调用呼叫。

所以我以重复的代码结束，这是我在JS中不需要的东西，我不能像在C＃中那样容易地重构代码。

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

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

亲切的问候。

PS：拥有.live()或.delegate()之类的东西会很高兴，但不仅与事件有关，不是吗？是否有任何事件jQuery /浏览器每次添加到DOM时都会引发？

Answer 1

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

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

如果你的目标是避免重复代码，你可以使用jq unobtrusive validation lib中的模式使你的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插件（比如验证），你的代码最终会变得更加纤薄。如果您正在寻找HTML和脚本的完全分离，那么使用HTML5不显眼的数据属性是一个很好的解决方案。

Answer 2

我已将@olivehour响应标记为正确，因为它为此问题提供了一个很好的解决方案。

我最终完成的是将jquery文件移到头部，只是jquery文件，其余的像“jquery-ui”，或者自定义js文件仍在底部。

原因是能够使用$(document).ready或$(function(){})，因为在视图上使用它，代码在“onload”上执行或者如果已经引发“onload”则直接执行，是什么完美的我想要的。

干杯。

如何构建Web应用程序以使AJAX和DHTML更容易？

2 个答案: