带有Mustache和JS的动态HTML页面生成器

问题描述 投票：3回答：1

每当我们单击“与他联系”链接时，我都希望使用Mustache为数组的每个对象生成专用的HTML页面。但是，看起来该链接仅为一个用户生成。

我的问题：如何为数组的每个对象提供专用页面，而不为数组的每个对象具有相同的链接？

这里是重现案件的代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>


<body>

    <div id="test-id">

<!-- Generated Content  -->

    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="main.js"></script>
    <script src="mustache.js"></script>
</body>
</html>

template_page.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>

    <div id="template-div">

    <!-- part filled by Mustache -->

    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="main.js"></script>
    <script src="mustache.js"></script>

</body>


</html>

main.js

document.addEventListener('DOMContentLoaded', function() {

    var ALL_DATA = [
{
    'lastname': 'lastname_1',
    'firstname': 'firstname_1'
},
{
    'lastname': 'lastname_2',
    'firstname': 'firstname_2'
},
{
    'lastname': 'lastname_3',
    'firstname': 'firstname_3'
}
];

    function displayData(obj_name) {

        var theDiv = document.getElementById("test-id");

        obj_name.forEach(doc => {
            var lastname = doc['lastname'];
            var firstname = doc['firstname'];

            console.log("found");
            console.log(doc);

            newdiv = document.createElement("div")
            var text = document.createTextNode(lastname + ' ' + firstname);
            var anchor_value = document.createElement("a")
            anchor_value.setAttribute("href", "template_page.html");
            anchor_value.setAttribute("class", "link-a");
            anchor_value.onclick = createPage(doc);
            anchor_value.appendChild(document.createTextNode("Contact him"));
            newdiv.appendChild(text);
            newdiv.appendChild(anchor_value);
            theDiv.appendChild(newdiv);

        });
    };

    displayData(ALL_DATA);



    function createPage(data) {

        console.log("found2");
        console.log(data);
        var template =

            `
    <h1> Welcome, {{firstname}} </h1>
    <h2> Your last name: {{lastname}} </h2>

    `

        var html = Mustache.render(template, data);
        $("#template-div").html(html);

    };


});

（也需要mustache.js）

javascript html mustache
1个回答
0
投票

如果只希望在客户端使用，则可以使用Url参数

index.html

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

  <div id="test-id">
  </div>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.1.0/mustache.min.js">
  </script>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var ALL_DATA = [{
          lastname: "lastname_1",
          firstname: "firstname_1"
        },
        {
          lastname: "lastname_2",
          firstname: "firstname_2"
        },
        {
          lastname: "lastname_3",
          firstname: "firstname_3"
        }
      ];

      function displayData(obj_name) {
        var theDiv = document.getElementById("test-id");
        obj_name.forEach(doc => {
          var lastname = doc["lastname"];
          var firstname = doc["firstname"];
          newdiv = document.createElement("div");
          var text = document.createTextNode(lastname + " " + firstname);
          var anchor_value = document.createElement("a");
          anchor_value.setAttribute("href", "template_page.html?fN=" + firstname + "&lN=" + lastname);
          anchor_value.setAttribute("class", "link-a");
          anchor_value.onclick = function() {
            createPage(doc);
          };
          anchor_value.appendChild(document.createTextNode("UserProfile"));
          newdiv.appendChild(text);
          newdiv.appendChild(anchor_value);
          theDiv.appendChild(newdiv);
        });
      }
      displayData(ALL_DATA);
    });
  </script>
</body>

</html>

template_page.html

    <!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

  <div id="template-div">
  </div>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.1.0/mustache.min.js">
  </script>

  <script>
$(document).ready(function() {
  data = { firstname: GetURLParameter("fN"), lastname: GetURLParameter("lN") };
  createPage(data);
});

function createPage(data) {
  var template = `
    <h1> Welcome, {{firstname}} </h1>
    <h2> Your last name: {{lastname}} </h2>

    `;

  var html = Mustache.render(template, data);
  $("#template-div").html(html);
}

function GetURLParameter(sParam) {
  var sPageURL = window.location.search.substring(1);
  var sURLVariables = sPageURL.split("&");
  for (var i = 0; i < sURLVariables.length; i++) {
    var sParameterName = sURLVariables[i].split("=");
    if (sParameterName[0] == sParam) {
      return sParameterName[1];
    }
  }
}

  </script>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.