asp.net-mvc RequireJS 如何处理多个页面和部分视图？

How does RequireJS work with multiple pages and partial views?

提问by Johan Alkst?l

I'm looking into RequireJSbut I'm uncertain about some things.

我正在研究RequireJS，但我不确定某些事情。

I understand how I can load all my dependencies with main.js. But do I need to add any logic to work with those dependencies in main.js?

我了解如何使用main.js. 但是我需要添加任何逻辑来处理这些依赖项main.js吗？

To me, main.jsseems like a document.ready state and you enter logic there when the document has loaded, right?

对我来说，main.js似乎是一个 document.ready 状态，当文档加载时你在那里输入逻辑，对吧？

And for other pages and partial views, do I need to create multiple main.jsor can I just reference loaded functions in dependencies from the views in a <script>for example?

对于其他页面和部分视图，我是否需要创建多个main.js或者我可以只从 a 中的视图引用依赖项中的加载函数<script>？

回答by Simon Smith

Update- I've added an example of using RequireJS with modular HTML components. Build tool example included - https://github.com/simonsmith/modular-html-requirejs

更新- 我添加了一个将 RequireJS 与模块化 HTML 组件一起使用的示例。包含构建工具示例 - https://github.com/simonsmith/modular-html-requirejs

I have also written a blog article about this - http://simonsmith.io/modular-html-components-with-requirejs/

我还写了一篇关于这个的博客文章 - http://simonsmith.io/modular-html-components-with-requirejs/

---

---

The approach of just using main.jsfor everything is probably more suited to a single page application.

只main.js用于所有内容的方法可能更适合单页应用程序。

The way I've handled this situation is to only include common site-wide JS in the main.jsfile:

我处理这种情况的方法是只在main.js文件中包含常见的站点范围的 JS ：

On every page:

在每一页上：

<script src="require.js" data-main="main"></script>

main.js

主文件

require.config({
// config options
});

require(['jquery', 'common/ajaxLoader', 'common/someOtherModule'], function($, ajax, otherModule) {
    // Modules that do stuff on every page are instantiated here 
});

page1.html

页面1.html

<script>
    require(['scripts/page1']);
</script>

page1.js

页面1.js

require(['jquery', 'page1Module'], function($, module){
    // page1 specific stuff here
});

The above example is just one of a couple of ways to handle it. Note the difference between loading a plain JavaScript file and a module.

上面的例子只是处理它的几种方法之一。请注意加载纯 JavaScript 文件和加载模块之间的区别。

A rule of thumb I follow is to keep all reusable modules (or Classes if it makes it easier to conceptualise) inside a definewith their own dependencies etc and then use requireto grab those modules, use their methods or interact with them in some way.

我遵循的一条经验法则是将所有可重用模块（或类，如果它更容易概念化）define与它们自己的依赖项等一起保存在一个内部，然后使用它们require来获取这些模块，使用它们的方法或以某种方式与它们交互。

Using this pattern will almost certainly require use of the domReady module that is a separate plugin for RequireJS. Use this instead of a ready function in jQueryfor example, as it allows modules to begin downloading before the DOM is ready which reduces the wait for your code to execute.

使用这种模式几乎肯定需要使用 domReady 模块，它是 RequireJS 的一个单独插件。例如，在 jQuery 中使用它而不是就绪函数，因为它允许模块在 DOM 准备好之前开始下载，从而减少了代码执行的等待时间。

EditYou may wish to see another example of multi-page applicationin the RequireJS repo

编辑您可能希望在 RequireJS repo 中看到另一个多页应用程序示例

回答by Chris Baxter

I have recently gone through the exercise of setting up RequrieJS with automatic build optimization in an ASP.NET MVC application. There are a lot of helpful blog articles such as Simon's that are a great reference. From an ASP.NET perspective one of the most useful I found in terms of configuring the RequireJS optimizer for multi-page ASP.NET applications was Making RequireJS play nice with ASP.NET MVC.

我最近完成了在 ASP.NET MVC 应用程序中使用自动构建优化设置 RequrieJS 的练习。有很多有用的博客文章，例如 Simon 的文章，是很好的参考。从 ASP.NET 的角度来看，在为多页 ASP.NET 应用程序配置 RequireJS 优化器方面，我发现最有用的方法之一是使 RequireJS 与 ASP.NET MVC 配合得很好。

Using the great information already out there I have put up my own ASP.NET MVC RequireJS example on GitHub. Much of what is included is similar to examples already out there, however to address the issue of partial views, and multi-page require dependencies I have taken a slightly different approach.

使用已有的重要信息，我在 GitHub 上发布了我自己的ASP.NET MVC RequireJS 示例。包含的大部分内容与已有的示例类似，但是为了解决部分视图和多页需要依赖项的问题，我采用了稍微不同的方法。

_Layout.cshtml

_Layout.cshtml

The most notable difference from existing examples is the creation of a custom RequireViewPagethat exposes methods to pass configuration data to RequrieJS as well as reference page specific require dependencies.

与现有示例最显着的区别是创建了一个自定义的RequireViewPage，它公开了将配置数据传递给 RequrieJS 的方法以及参考页面特定的 require 依赖项。

So your _Layout.cshtml will look much like what you'd expect with:

所以你的 _Layout.cshtml 看起来很像你期望的：

<head>
    ...
    @RenderModuleConfig()
    <script type="text/javascript" src="@Url.Script("vendor/require.js")" data-main="main"></script>
</head>
<body>
    ...

Views & Partials

视图和部分

To wire up views (and in my case knockout view models), an additional script fragmenthas been added to the bottom of _Layout.cshtml as follows

为了连接视图（在我的例子中是淘汰视图模型），一个额外的脚本片段被添加到 _Layout.cshtml 的底部，如下所示

    ...
    @RenderSection("scripts", required: false)
    <script type="text/javascript">require(['main'], function () { require(['lib/knockout/knockout.require']); });</script>
</body>

This will ensure that for any view dependency, the main module has been loaded (assuming dependencies for main have being defined in main.jsand then allows for view specific dependencies to be wired up via data attributes.

这将确保对于任何视图依赖项，主模块已被加载（假设 main 的依赖项已在其中定义main.js，然后允许通过数据属性连接特定于视图的依赖项。

<div data-require="@MainModule"> ... </div>
<div data-require="@Module("address")"> ... </div>
<div data-require="view\home\index\model"> ... </div>

---

---

For a full explaination of the design and choices, see the README on GitHub

有关设计和选择的完整说明，请参阅GitHub 上的自述文件