Добавить частичное EJS с JQuery после загрузки страницы? - PullRequest
Новая
       10

Добавить частичное EJS с JQuery после загрузки страницы?

0 голосов
/ 13 января 2019

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

Мой код JQuery: 

    var lunchRefreshButton = $(".myRefreshButtonLunch");        
    lunchRefreshButton.click(function() {
                  var outerParent = $(this).closest(".lunch__items__container");
                  var randomFoodItem = '<div class="food__item__image">\
                                          <img class="food__image" src="<%=newFoodItem.image%>">\
                                        </div>\
                                        <div class="food__item__info">\
                                          <p class="lunch__name"><%=newFoodItem.name%></p>\
                                          <p class="food__info">Servings: <%= newFoodItem.nutrition.serving_size %></p>\
                                        </div>\
                                        <div class="myBtn">\
                                          <div class="refreshContainer">\
                                            <i class="fa fa-sync-alt fa-lg myRefreshButtonLunch"></i> \
                                          </div>\
                                          <i class="fa fa-info-circle fa-lg myBtnBtnLunch"></i>\
                                        </div>';

                  outerParent.append(randomFoodItem);
     });

А вот пример EJS: 

    <div class="lunch__items__container">
           <div class="refreshContainer">
              <i class="fa fa-sync-alt fa-lg myRefreshButtonLunch"></i> 
           </div>
           <% var random = Math.floor(Math.random() * 30); %>
           <% var newFoodItem = extraLunchArr[random]; %>
           //appended item is supposed to go here
    </div>

Вот как выглядит страница:

[]

Любая помощь чрезвычайно ценится.

1 Ответ

0 голосов
/ 13 января 2019

Попробуйте это. 

var randomFoodItem = '<div class="food__item__image">\
                           <img class="food__image" src=" ' + <%=newFoodItem.image%> + ' ">\
                      </div>\
                      <div class="food__item__info">\
                           <p class="lunch__name"> ' + <%=newFoodItem.name%> + '</p>\
                           <p class="food__info">Servings: ' + <%= newFoodItem.nutrition.serving_size %> + '</p>\
                      </div>\
                      <div class="myBtn">\
                           <div class="refreshContainer">\
                                 <i class="fa fa-sync-alt fa-lg myRefreshButtonLunch"></i> \
                           </div>\
                           <i class="fa fa-info-circle fa-lg myBtnBtnLunch"></i>\
                      </div>';

Вы должны экранировать элементы ejs, иначе они будут обрабатываться как символы html.

...