Рендеринг html компонентов, изменяющих его переменные с помощью javascript после вызова ajax

Question

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

Лучше всего создать файл с шаблоном компонента и включить его с помощью javascript? Если да, как я мог это сделать? Если нет, то что лучше?

Что у меня есть:

Ajax call:

`

$("#list-users").click(function(ev){
    ev.preventDefault();
    $.ajax({
        url     : '/ajax/Users.php',
    type    : 'POST',
    dataType: 'json',
    data    : data,
    success : function(users){
            users.forEach((user, index) => {
                //The problem is here. I'm looking for a way to
                //"store" the html component code to dont need put
                //the code inside a variable. 
                var complexHtml = '...<p>' + user.name + '</p>...';
                $('.list').append(complexHtml);
            })
    })
})

`

Answer 1

Использование Vue / React / Angular может быть простым решением, потому что они автоматически выполняют работу по восстановлению. Без использования этих платформ я обычно делаю следующее:

1. создать шаблонную структуру html и сделать ее невидимой
2. используйте jquery clone для создания
3. используйте jquery для установки данных
4. используйте jquery appendTo для его отображения.

Примеры кодов приведены ниже:

<div id="target"></div>

<div class="template-code" style="display:none">
    <div class="container">
       <div class="cls1"></div>
       <div class="cls2"></div>
    </div>
</div>

<script>
.... ajax success function (){
    var div = $(".template-code .container").clone();
    $(div).find(".cls1").html("data from ajax result");
    $(div).find(".cls2").html("data from ajax result");
    .... bind event as well if required ...
    $("#target").empty();
    $(div).appendTo("#target");

}
</script>

Надеюсь, это полезно.

Answer 2

, потому что это сделает функцию успеха очень большой и нечитаемой.

... ты ищешь это? `

var myUSERS = {};
var myUsersLoaded = false;

$("#list-users").click(function(ev){
    ev.preventDefault();
    $.ajax({
      url     : '/ajax/Users.php',
      type    : 'POST',
      dataType: 'json',
      data    : data,
      success : fctDo_Stuff_User 
    })
})

//...

function fctDo_Stuff_User(users) {
  users.forEach((user, index) => {

    var complexHtml = '...<p>' + user.name + '</p>...';
    $('.list').append(complexHtml);
})

`