使用 jquery 从 JSON 数据生成动态 html

Question

我一直在谷歌搜索并寻找动态生成 html 的最佳方式。我当前的解决方案遵循代码片段。我的代码思路是从服务器抓取数据，然后使用返回的任务项数组构建动态列表内容。

我的问题是，肯定有更好、更简洁且更易于维护的方法吗？

// returns an array of task objects from server
$.post("/fetch", JSON.stringify({
    "Sort": "tasksperuser"
  }), function(data) {
    // Generate a task line item in html before appending for each task object.
    $.each(data, function() {
      console.log($(this));
      $("#taskBox").append(taskline);
      var tempkey = $(this)[0]['key'];
      $("#taskBox > p:last").attr("id", tempkey);
      if ($(this)[0]['completed'] == true) {
        $("#" + tempkey + " .taskCheckbox").prop('checked', true)
          .siblings('.task-title').css("text-decoration", "line-through");
      }
      $("#" + tempkey + " .task-title").text($(this)[0]['title']);
    })
  }, "json")
  .fail(function() {
    console.log("Tasks load per user from server failure.");
  });

var taskline = '<p id="" class="taskWrapper">' +
  '<input type="checkbox" class="taskCheckbox"/>' +
  '<span class="task-title"></span>' +
  '<button type="button" class="btn btn-default btn-xs taskDelete pull-right" aria-label="Left Align">' +
  '  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>' +
  '</button>' +
  '<button type="button" class="btn btn-default btn-xs pull-right" data-toggle="modal" data-target="#TaskModal" data-key="" aria-label="Left Align">' +
  '  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>' +
  '</button>' +
  '</p>'

Answer 1

使用像 Mustache or Handlebars 这样的模板引擎。您可以将 "mustaches" 注入模板并在传递的数据中相应地命名它们。这样就无需遍历新创建的 HTML 的 DOM 来注入值。

使用 jquery 从 JSON 数据生成动态 html

Generating dynamic html from JSON data with jquery

html

javascript

jquery

twitter-bootstrap-3