Паруса.js-как ввести JS-файл в определенный маршрут?

например, у меня есть страницы /locations/map Что мне нужно включить Google Map библиотека, и включить .js(например, расположение.в JS) специально только для этой страницы.

Я хочу ввести эти 2 файла после <!--SCRIPTS END--> эта строка

возможно ли это сделать?

Примечание: я использовал паруса.с JS версии v0.10

14
inject javascript node.js sails.js

5 ответов

паруса использует ejs-locals в своем представлении рендеринга, так что вы можете выполнить то, что вы хотите с блоками.

в своем , под <!--SCRIPTS END--> добавить (например):

<%- blocks.localScripts %>

тогда в представлении вы служите в /locations/map, вызовите блок с тегом скрипта, например:

<% block('localScripts', '<script src="https://maps.googleapis.com/maps/api/js"></script>') %>

в качестве альтернативы вы можете поставить <!--SCRIPTS--> и <!--SCRIPTS END--> теги в <head> вашего макета, а затем добавьте свои скрипты для конкретного вида непосредственно в свой просмотр вместо использования блоков. Это прекрасный вариант, если вы не против подождать загрузки этих связанных скриптов до отображения содержимого страницы.

24

Скоттответ-это правильный способ вставки неглубоких JS в определенное представление. Просто небольшой комментарий, хотя:block вызов из вида не должно быть тире. Должно быть так:

<% block('localScripts', '<script src="https://maps.googleapis.com/maps/api/js"></script>') %>

оба вызова будут работать, но использование тире делает вставку дважды; как только представление загружается и предшествует отрисовке макета, а затем еще раз, когда представление вставляется в отрисованный базовый макет. Это ведет не только вставлять / запускать излишне дважды один и тот же код, но и ошибки, которые нарушают ваш JS-код, если вставленный скрипт зависит от библиотек, которые у вас есть в базовом макете (например, jQuery, Backbone).

EJS интерпретирует магию <%- Как "вставить без эскапады". Итак, -Я думаю - то, что это делает, называется block() функция, которая возвращает наш HTML <script> тег. Это заменяется там, где магия была вызвана, но также выполняет внутри него, который выполняет блок макета localScripts замена.

С другой стороны, <% означает "инструкция". То есть, просто запустите этот фрагмент кода JS, который не повторяется в представлении, где вызывается.

13

Я открываю для себя другой способ, чтобы сделать это

на MapController.js

// you can add as many as you like
res.locals.scripts = [
  '//maps.googleapis.com/maps/api/js',
];
return res.view();

на макет.EJS по

<!--SCRIPTS-->
<!--SCRIPTS END-->

<!-- Loop through all scripts that passed from controller -->
<% if (scripts) { %>
    <% for (i = 0; i < scripts.length; i++) { %>
        <script src="<%- scripts[i] %>"></script>
    <% } %>
<% } %>
4

Я знаю, что это старый вопрос, я обнаружил другой вариант.

:

маршруты конфиг\.js

код:

'/': 'HomeController.StartHome'

Я StartHome:

api\контроллеры\HomeController.js

код:

StartHome: function(req, res) {

    var template_data = {
        "data" : {
            "view_name" : "home_view"
        }

    }

    res.view('home_view', template_data)
}

здесь, Я создал объект с некоторыми данными, который передается в шаблон EJS (клиенту).

:

просмотров макет\.EJS по

код:

<% if (data["view_name"] === "home_view") { %>
<script src="script_for_home_view.js"></script>
<% } %>

в моих макетов.ejs я создал оператор if, который" включает " тег скрипта в зависимости от представления, на котором я сейчас нахожусь.

вот как я справляюсь с этим. Надеюсь, вам все ясно.

0.12.4 паруса

0

этот метод позволяет гибко локально обслуживать JS-файлы с любой страницы, а также предотвращать любые ошибки ссылок, вызванные зависимостями.

на .js вставить '!js / local/*.js в самом низу jsFilesToInject вот так:

var jsFilesToInject = [

// Load sails.io before everything else
'js/dependencies/sails.io.js',

// Dependencies like jQuery, or Angular are brought in here
'js/dependencies/jquery-3.3.1.min.js',
'js/dependencies/**/*.js',

// All of the rest of your client-side js files
// will be injected here in no particular order.
'js/**/*.js',

//Ignore local injected scripts
'!js/local/*.js' 

];

создать местные внутри / активы / js папка ie / активы / js / local/. Поместите все локально введенные скрипты в здесь.

в вашем главном представлении EJS ie макет.EJS по вставить под блоком скриптов, как это:

<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/jquery-3.3.1.min.js"></script>
<script src="/js/dependencies/bootstrap.min.js"></script>
<script src="/js/dependencies/popper.min.js"></script>
<!--SCRIPTS END--> 
<%- blocks.localScripts %>

в вашем локальном представлении ejs (например. домашняя страница.ejs) вставьте свой localScripts блок такой:

<% block('localScripts', '<script src="/js/local/homepage.js"></script>') %>

паруса версии v0.12.14

редактировать это все еще актуально для парусов v1.0?

мой ответ категоричен:да и в моем предыдущем ответе мне не хватало объяснений, как получить максимальную отдачу от трубопровода Grunt, такого как clean, coffee, concat, uglify и т. д... при поступлении в производство.

трюк здесь состоит в том, чтобы сделать локальный файл (должен быть только один на странице) как можно меньше.

  • группа и имя конкретных вызовов вашей функции
  • сохранить функции в виде отдельных файлов для удобства обслуживания и сгруппировать их в папки.
  • групповые привязки и любые инициализация глобальных переменных в пару функций, таких как initThisPageVariables() и initThisPageBindings() так что Ворчун может сжать их позже.
  • установите вызов главной функции для запуска приложения startThisPageApp()

затем просто вызывая несколько функций из вашего локального (master) файла, чтобы получить вещи прокатки.

$(window).on('load', function(){

   initThisPageVariables();
   initThisPageBindings();

   $(window).on("resize", function(){
      initThisPageVariables();
   }).resize();

   startThisPageApp(); 

});
0