Переплетение переменных EJS и Javascript внутри

Мне нужно использовать переменную Javascript (определенную в интерфейсе) в некотором коде EJS следующим образом:

var selected = 1;
<% for (var i=0; i < supplies.length; i++) { %>
    if (i == selected) {
        console.log(supplies);    
    }
<% } %>

Я использую EJS, Express.js и сокет.Ио. Я мог бы преобразовать переменную Javascript в переменную EJS, отправив сообщение на мой узел.экземпляр сервера js, но это глупо... Есть ли способ использовать переменные Javascript внутри EJS?

изменить: Я хочу получить доступ к поставкам, массив JavaScript, после того, как пользователь выбрал элемент из выпадающего меню. Когда он выбирает этот элемент, функция javascript с вышеуказанным кодом должна получить доступ к некоторым EJS. Вот почему мне нужно использовать обычную переменную Javascript в EJS.

14
ejs express javascript node.js

1 ответов

могу ли я передать переменную JavaScript в шаблон?:

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

устранение:

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

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

вот модифицированная очистка.шаблон ejs с классом, добавленным с помощью помощника просмотра:

чистка.EJS по:

<script>
// NOTE: even if uncommented, JavaScript inside a template will not run.
//    var selected = 1;
</script>
<h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>

        <li>
            <!-- apply a class to the selected element -->
            <a class='<%= supplies[i].selected %>' href='supplies/<%= supplies[i].value %>'>
                <%= supplies[i].value %>
            </a>
        </li>
    <% } %>
</ul>

визуализированный HTML выглядит следующим образом:

<script>
    /** NOTE: Script blocks will not fire in rendered templates. They are ignored
    //    var selected = 1;
</script>
<h1>Cleaning Supplies</h1>
<ul>


        <li>
            <a class="" href="supplies/Broom">
                Broom
            </a>
        </li>


        <li>
            <!-- Note the selected element -->
            <a class="selected" href="supplies/mop">
                mop
            </a>
        </li>


        <li>
            <a class="" href="supplies/Hammer">
                Hammer
            </a>
        </li>

</ul>

это представление было отображено с использованием следующего кода JavaScript:

// modified data structure so that array of supplies contains objects
 // with the name of the item and whether or not it's selected.
data = {
    "title":"Cleaning Supplies",
    "supplies":[
        {
            "value":"Broom",
            "selected":""
        },
        {
            "value":"mop",
            "selected":"selected"
        },
        {
            "value":"Hammer",
            "selected":""
        }
    ]
};

// pass data into template and render
var html = new EJS({url: 'cleaning.ejs'}).render(data);

// add HTML to the DOM using a <div id="container"></div> wrapper.
document.getElementById("container").innerHTML = html;

как вы можете видеть, поставки[i].selected применяет выбранный класс к элементу, помеченному как выбран в структуре данных. Я изменил значение href так, чтобы он получил доступ к объекту в элементе массива ith вместо значения самого массива.

теперь, когда выбранный элемент изменен, мы просто изменяем переменную данных, повторно визуализируем шаблон EJS и добавляем его в DOM.

С помощью этого CSS в голове вашего HTML-документа вы увидите что-то похожее на то, что отображается ниже:

<style>
    .selected { color:red; }
</style>

Demo of selected element in red

почему JavaScript в шаблоне не работает:

метод, который вы пытаетесь использовать для управления значениями JavaScript или использовать значения JavaScript внутри шаблона EJS не будет работать. Это связано в основном с контекстом , когда выполняется JavaScript.

вы правы, думая, что шаблоны EJS компилируются на стороне клиента. Однако JavaScript в представлении помощники выполняются независимо от JavaScript в глобальном контексте. Глядя на EJS по.исходный код js, похоже, что eval используется в этом процессе.

кроме того, EJS возвращает отображаемый HTML в виде строки, и документация для EJS инструктирует нас вводить эту отображаемую строку шаблона в DOM с помощью innerHTML:

document.getElementById("container").innerHTML = html;

независимо от того, какую технологию просмотра вы используете, одна из основных истин некоторых браузеров, когда она приходит на JavaScript это:некоторые браузеры могут не оценить <script> блоки, добавленные в DOM с помощью innerHTML.

другими словами, в моем тестовом шаблоне, когда я попытался добавить тег скрипта для вывода выбранного значения в консоль, я увидел, что блок скрипта был добавлен, но из-за того, как работает innerHTML, он не был выполнен:

пример шаблона демонстрирует, что JavaScript не будет работать при добавлении с помощью innerHTML будет:

 <h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) {  %>
       <span id="selected"></span><script>console.info('test <%= i %> = <%= supplies[i] %>');</script>            
        <li>
            <a href='supplies/<%= supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        </li>
    <% } %>
</ul>

визуализированный HTML:

как вы можете видеть ниже, на консоли.операторы log присутствуют в HTML. Однако при добавлении с помощью innerHTML они не будут срабатывать.

подход к технологиям view заключается в том, чтобы ограничить их использование только этим, визуализируя представление. держите свою логику в"обычном JavaScript".

<h1>Cleaning Supplies</h1>
<ul>

       <span id="selected"></span><script>console.info('test 0 = Brrom');</script>            
        <li>
            <a href='supplies/Brrom'>
                Brrom
            </a>
        </li>

       <span id="selected"></span><script>console.info('test 1 = mop');</script>            
        <li>
            <a href='supplies/mop'>
                mop
            </a>
        </li>

       <span id="selected"></span><script>console.info('test 2 = Hammer');</script>            
        <li>
            <a href='supplies/Hammer'>
                Hammer
            </a>
        </li>

</ul>

больше примеров и документации можно найти на шаблонах EJS на Код Google Встроенный JavaScript сайт.

43