javascript - 自定义 View 引擎来解决 Javascript/PartialView 问题？

Question

我看到很多关于 PartialViews 和 Javascript 的问题:问题是 PartialView 需要 Javascript，例如呈现 jqGrid 的 View :

部分 View 需要 <div id="myGrid"></div>然后是一些脚本:

<script>
$(document).ready(function(){
   $('#myGrid').jqGrid( { // config params go here 
   });
}
</script>

问题是如何包含 PartialView 而不会在页面中乱放内联标签和多个 $(document).ready 标签。

我们还想将多个 RenderPartial 调用的结果合并到一个 document.Ready() 调用中。

最后，我们遇到了 Javascript 库文件的问题，例如 JQuery 和 JQGrid.js，理想情况下，它们应该包含在页面底部(就在 $.ready block 之前)，并且理想情况下仅在适当的 PartialViews 出现时才包含在页面上使用。

在搜索 WWW 时，似乎没有人解决过这个问题。一种潜在的方法可能是实现自定义 View 引擎。我想知道是否有人有任何我可能错过的替代建议？

Answer 1

这是一个很好的问题，也是我的团队在首次发布 JQuery 时遇到的问题。一位同事编写了一个页面基类，将所有文档就绪调用合并为一个，但这完全是在浪费时间和我们客户的金钱。

没有必要将 $(document).ready() 调用合并为一个，因为它们都会被调用，一个接一个地按照它们在页面上出现的顺序调用。这是由于该方法的多播委托(delegate)性质，它不会对性能产生重大影响。您可能会发现您的页面更易于维护，但可维护性很少成为 jQuery 的问题，因为它具有如此简洁的语法。

您能否详细说明想要合并它们的原因？我发现很多开发人员都是完美主义者，希望他们的标记绝对完美。相反，我发现当它对客户来说足够好时，当它充分执行并正确显示时，我的时间就可以更好地用于满足下一个需求。过去，我浪费了很多时间来格式化 HTML，没人会看。

您希望出现在页面底部的任何脚本都应该在 ClientScriptManager.RegisterStartupScript 方法中，因为它呈现在页面底部。

http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx

编辑 刚注意到您的问题是特定于 ASP.NET MVC 的。我的答案更像是一个 ASP.NET 答案，但就呈现的 html 而言，我的大部分评论仍然相关。多个 document.ready 函数不是问题。

标准的 jQuery 方法是编写一个脚本来为多个元素添加行为。因此，向要包含网格的 div 添加一个类，并在每个 div 上调用一个函数:

<script language="text/javascript">
     $(document).ready(function(){
         $('.myGridClass').each(function(){
               $(this).jqGrid( { 
                    // config params can be determined from 
                    //attributes added to the div element
                    var url = $(this).attr("data-url");

                });
          });
     }
</script>

你只需要在你的页面和你的局部 View 中添加一次这个脚本:

   <div class="myGridClass" data-url="http://whatever-url-to-be-used"></div>

注意 data-url 属性。这是 HTML5 语法，将无法通过 HTML 4 验证。它仍然可以在 HTML 4 浏览器中工作。仅当您必须通过 html 验证器运行您的页面时才重要。我可以看到你already know about HTML5