Question

我正在使用ajax获取用户数据列表。但是在执行此ajax调用之后，我必须为每个用户呈现一个包含许多用户数据的html结构（如数据表）。我的疑问在于如何以一种实用且优雅的方式“存储” HTML代码，以保持代码的可读性并允许我插入用户数据。

使用组件模板创建文件并将其包含在javascript中是最好的主意吗？如果是，我该怎么做？如果没有，什么是最好的？

我所拥有的：

Ajax调用：

`

$("#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

因为它将使成功功能变得非常庞大且难以理解。

...您在寻找这个吗？ `

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);
})

`

Answer 2

使用Vue / React / Angular是一个简单的解决方案，因为它们会自动为您完成整理工作。在不使用这些框架的情况下，我通常会执行以下操作：

创建一个html模板结构并将其设置为不可见
使用jquery克隆创建
使用jquery设置数据
使用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>

希望这会有所帮助。

在ajax调用后，呈现html组件并使用javascript更改其变量

2 个答案: