Вопрос по asp.net-mvc – Как RequireJS работает с несколькими страницами и частичными представлениями?

40

Я смотрю вRequireJS но я не уверен в некоторых вещах.

Я понимаю, как я могу загрузить все свои зависимости сmain.js. But do I need to add any logic to work with those dependencies in main.js?

Мне,main.js похоже на состояние document.ready и вы вводите логику там, когда документ загружен, верно?

И для других страниц и частичных просмотров, мне нужно создать несколькоmain.js или я могу просто ссылаться на загруженные функции в зависимости от представлений в<script> например?

Ваш Ответ

2   ответа
92

Обновит - Я добавил пример использования RequireJS с модульными компонентами HTML. Пример инструмента сборки включен -https: //github.com/simonsmith/modular-html-requirej

Я также написал статью об этом в блоге -http: //simonsmith.io/modular-html-components-with-requirejs

Подход просто использованияmain.js потому что все это вероятно больше подходит для одностраничного приложения.

То, как я справился с этой ситуацией, заключается в том, чтобы включать в JS только общие JS для всего сайтmain.js файл

На каждой странице:

<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

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

Page1.js

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

Приведенный выше пример - лишь один из нескольких способов справиться с этим. Заметка разница между загрузкой простого файла JavaScript и модуля.

Эмпирическое правило, которому я следую, заключается в том, чтобы все многократно используемые модули (или классы, если это облегчает концептуализацию) находились внутриdefine со своими зависимостями и т. д., а затем используйтеrequire чтобы получить эти модули, использовать их методы или каким-либо образом взаимодействовать с ними.

Использование этого шаблона почти наверняка потребует использования модуля domReady это отдельный плагин для RequireJS. Использовать этот вместо готовой функции в jQuery например, так как он позволяет загружать модули до того, как DOM будет готов, что сокращает время ожидания выполнения вашего кода.

Редактироват Вы можете пожелать посмотрите другой пример многостраничного приложения в репо RequireJS

Спасибо за очень хорошо написанный ответ. Теперь я лучше понимаю, как использовать RequireJS. Johan Alkstål
описанный выше метод отлично работает на страницах, но когда страница, загруженная с помощью ajax, вызывает div, модули не загружаются .. какая-либо помощь? Vijayant Katyal
Это правда, и с тех пор, как я отвечаю на вопрос, я стараюсь указать параметры конфигурации или, возможно,main может быть указан как зависимость внутриpage1.js. Мне нужно проверить этот подход. Simon Smith
Я согласен с большей частью этого, но я бы не стал включатьrequire вызов для скрипта страницы. Похоже, плохая практика по нескольким причинам. Esteban Araya
Этот подход не кажется полностью надежным, потому что код в тегах встроенного скрипта вполне может быть выполнен перед кодом в main.js, что приводит к случайным сбоям. Видеть этот ответ на связанный вопрос. Rob Smallshire
3

ей сборки в приложении ASP.NET MVC. Есть много полезных статей в блогах, таких как Саймон, которые являются отличным справочным материалом. С точки зрения ASP.NET одним из наиболее полезных способов настройки оптимизатора RequireJS для многостраничных приложений ASP.NET, который я нашел, было Создание RequireJS играть хорошо с ASP.NET MVC.

Используя отличную информацию, я поднял свою собственную ASP.NET MVC RequireJS пример на GitHub. Многое из того, что включено, похоже на уже существующие примеры, однако для решения проблемы частичных представлений и многостраничных зависимостей я выбрал немного другой подход.

_Layout.cshtml

Самым заметным отличием от существующих примеров является создание кастомного RequireViewPage, который предоставляет методы для передачи данных конфигурации в RequrieJS, а также для зависимых страниц, требующих зависимости.

Так что ваш _Layout.cshtml будет очень похож на то, что вы ожидаете:

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

Views & Partials

Чтобы связать представления (и в моем случае модели с нокаутом), дополнительный фрагмент скрипта был добавлен в нижнюю часть _Layout.cshtml следующим образом

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

Это обеспечит загрузку основного модуля для любой зависимости представления (при условии, что зависимости для main определены вmain.js, а затем позволяет просматривать определенные зависимости, подключаемые через атрибуты данных.

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

Для полного объяснения дизайна и выбора см. README на GitHub

Похожие вопросы