Усы и Bootstrap Модал - PullRequest
Новая
       26

Усы и Bootstrap Модал

0 голосов
/ 21 марта 2020

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

Вот мой массив элементов для загрузки в шаблон: 

var jobs = [
{
"title": "Project Engineer",
"subtitle": "Engineer",
"desc": "Desc",
"btn": "Apply Now",
"uuid":"1"
},
{
"title": "System Engineer Rolling Stock",
"subtitle": "Engineer",
"desc": "Desc",
"btn": "Apply Now",
"uuid":"2"
},
{
"title": "Project Manager ETCS Onboard",
"subtitle": "Manager",
"desc": "Desc",
"btn": "Apply Now",
"uuid":"3"
}
]

И мой код шаблона выглядит так: 

/* Dynamic Job Template Start */
$.each(jobs, function(index, item) {
var dynamic_template = ''
+ '<div class="modal fade" id="staticBackdrop_{{uuid}}" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">'
+ '<div class="modal-dialog" role="document">'
+ '<div class="modal-content">'
+ '<div class="modal-header">'
+ '<h5 class="modal-title" id="staticBackdropLabel">{{title}}</h5>'
+ '<button type="button" class="close" data-dismiss="modal" aria-label="Close">'
+ '<span aria-hidden="true">&times;</span>'
+ '</button>'
+ '</div>'
+ '<div class="modal-body">'
+ '<div class="form-group">'
+ '<input type="text" id="q" class="form-control" placeholder="Vad letar du efter?"/>'
+ '<input type="button" onclick="gsearch();" value="{{title}}" class="form-control btn btn-primary mt-2"/>'
+ '</div>'
+ '</div>'
+ '<div class="modal-footer justify-content-center">'
+ '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
$('#dynamic_job').append(Mustache.render(dynamic_template, item));
});
/* Dynamic Job Template End */

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

<a href="" class="card-link" data-toggle="modal" data-target="#staticBackdrop_{{uuid}}">{{btn}}</a>

И, наконец, модальный шаблон отображается в 

<div id="dynamic_job"></div>

Это невозможно или я что-то пропустил? Я также попытался добавить модальный код в HTML, а затем просто обновил div для модального содержимого, но это тоже не сработало.

Благодарю за отзыв.

...