Использование EJS между тегами скрипта - PullRequest
Новая
       7

Использование EJS между тегами скрипта

0 голосов
/ 07 июня 2019

Я новичок в EJS, и мне нужна помощь с динамическим созданием элементов div из данных, отображаемых с помощью EJS, по нажатию кнопки.В моем экспресс-файле: 

res.render("user/profile.ejs", { posts: req.user.posts });
//posts is an array with elements having a similar structure to
/*"posts":[
    {
        "_id":{"$oid":"5cf9072b74cc8310803c89df"},
        "type":"Story",
        "subject/genre":"somethin",
        "content":"another thing",
        "date":{"$date":{"$numberLong":"1559824171334"}}
    }
]*/

В моем файле ejs: 

<div class="row">
    <div class="col">
        <div style="float: right">
            <button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="All" style="width: 60px">All</button>   
            <button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="Idea" style="width: 60px">Ideas</button>    
            <button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="Story" style="width: 60px">Stories</button>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
        $(".loadPosts-btn").click(function(){
            $(".posts-row").remove();
            if($(this).attr("id") === "All"){
                <% posts.forEach(elem=>{ %>
                    document.getElementsByClassName("container")[0].innerHTML += 
                        `<div class="row posts-row" style="border: 1px solid black">
                            <div class="col">
                                <div class="post-container m-4 p-3">
                                    <h2>${elem.type}</h2>
                                    <h4>${elem["subject/genre"]}</h4>
                                    <p>${elem.content}<p>
                                    <small>${elem.date}</small>
                                </div>
                            </div>
                        </div>`
                <% }) %>    
            };
        });
        $("#All").click();

    });
</script>

Показывает ошибку: elem is not defined.что я считаю нормальным, потому что я не передал elem на render().Вкратце, я хочу добавить <div class="row"> к каждому сообщению в массиве posts при нажатии кнопки с id="All".Я не знаю, стоит ли мне делать это в тегах <script> или в тегах <div class="row"> без тегов <script>.

Заранее спасибо.

...