如何构建您的web应用程序以使AJAX和DHTML更容易

给定一个网站的结构

<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日期记录第一次工作，我必须在<body>的末尾调用$('input.date').datepicker()，在外部<script>声明之后。
如果页面下载的部分视图是新的<input type="text" class="date"/>元素时，我必须将初始化调用放在ajax视图中调用。

所以我以重复的代码结束，这是我不想要的，特别是在JS中，我不能像在c#中那样容易地重构代码。

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

你如何构建你的web应用程序?

亲切的问候。PS:如果有.live()或.delegate()这样的东西就好了，但不仅仅是与事件相关，不是吗?是不是有任何事件，jQuery/浏览器提出，每次有东西被添加到DOM?

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

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

如果您的目标是避免重复的代码，您可以使您的js操作不引人注目，使用jq不引人注目的验证库中的模式。所以你最终得到的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. unobsive .js文件。它真的非常聪明，如果您实际上没有扩展另一个jquery插件(如validate)，那么您的代码最终会精简得多。如果你正在寻找HTML和脚本的完全分离，使用HTML5不引人注目的数据属性是一个很好的解决方案。

我已经将@olivehour响应标记为正确，因为它陈述了一个很好的解决方案。

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

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

欢呼。

相关内容

最新更新

热门标签：