2012-01-11 3 views
5

Я работаю с EJS для рендеринга и серверных HTML-страниц с сервера Nodejs. Некоторые из парциальных я включаю есть скрипты и таблицы стилей, на которые ссылается в голову, но это заставляет клиента сделать несколько запросов для одного файла (например, если родительский вид также включает в себя файл)Частичные части Nodejs EJS со скриптами в голове

Например:

<!-- file: parent.ejs --> 
<html> 
    <head> 
     <link rel="stylesheet" href="public/mystylesheet.css"> 
     <script src="public/myscript.js"> 
    </head> 
    <body> 
     <%- partial("partial.ejs") %> 
    </body> 
</html> 

и парциальное:

<!-- file: partial.ejs --> 
<html> 
    <head> 
     <link rel="stylesheet" href="public/mystylesheet.css"> 
     <script src="public/myscript.js"> 
    </head> 
    <body> 
     This is an EJS partial! 
    </body> 
</html> 

в этом случае, "mystylesheet.css" загружается клиентом дважды (излишне), и поэтому "myscript.js"

Есть ли простой способ (желательно с помощью EJS), чтобы убедиться, что таблица стилей или сценарий включена, когда это требует частичный, но не если родительский вид уже включил ресурс?

+0

Как альтернативное предложение, вы можете использовать javascript, чтобы обнаружить, что так же, как это делают ребята html5 (например) ... ' '(предполагая, что' myscript.js' пишет __ [namespaced object] (http://stackoverflow.com/q/881515/) __ 'myscript' в окно с параметром/свойством' object' – jcolebrand

+0

Это хорошая идея для скриптов, однако проблема остается в отношении таблиц стилей (если вы не можете думать о работоспособном расширении этой идеи) – bigpopakap

+0

ну, если вам нужно он несколько раз на той же странице он должен оставаться в кэше ...но на самом деле у меня нет хорошего решения, и я снялся в этой надежде увидеть хорошую информацию. – jcolebrand

ответ

2

Я нашел довольно хорошее решение этой проблемы, которая в основном сводится к использованию переменной EJS для отслеживания ресурсов, включенных по мере рендеринга документа EJS. Вот сокращенный пример ниже, который работает только для тегов сценария (но может быть легко расширена для таблиц стилей или что-нибудь еще)

Неполный, который помогает с включением ресурсов:

//file: "include.ejs" 
<% for (var i in scripts) { %> //scripts an arr of js files to (maybe) include 
    <% if (!resources[scripts[i]]) { %> 
     <script src="<%= scripts[i] %>"></script> 
     <% resources[scripts[i]] = true %> 
    <% } %> 
<% } %> <!-- end for --> 

и файл, который использует это частичное включить скрипты

//file: "somepartial.ejs" 
<html> 
    <head> 
     <%- partial("include.ejs", { 
       scripts: ["lib/jquery.js", "lib/bootstrap-tabs.js"] 
      }) %> 
    </head> 
    <body> 
     <!-- MY EJS PARTIAL! --> 
    </body> 
</html> 

И когда отрисовка парциальное:

response.render('somepartial.ejs', { 
    resources: {}, 
    /* some other variables */ 
}); 

Таким образом, вы можете быть уверены, что скрипт включен частично, но не, если она уже включена где-то в оказанной HTML страницы

Ограничение

Существует одно ограничение, что я наткнулся на: Если вы загружаете часть вашей страницы с просьбой AJAX как

$("#someDiv").load("/another/part/of/the/page.html"); 

Затем ресурсы включены в AJAX-нагруженной части страницы не будут знать о сценарии, уже загружены (если вы не передать эту информацию в REST, как я это делаю):

$("#someDiv").load("/another/part/of/the/page.html?resources={...}"); 

Конечно, с этим небольшим исправлением любые две части страницы, которые загружаются вызовом AJAX, могут запрашивать один и тот же ресурс, и нет никакого способа узнать их, поскольку они знают только, (надеюсь, что имеет смысл)

Смежные вопросы