用于 JSON 数据到 HTML 的基本 JavaScript 模板，模板字符串是 JavaScript 变量

Basic JavaScript template for JSON data to HTML with template string being a JavaScript variable

本文关键字：JavaScript 模板 字符串 变量 数据 JSON HTML 用于      更新时间：2023-09-26

我正在寻找一个非常小且轻量级的简单函数或库，它只允许我定义一个模板，该模板具有从 JSON 数据结果填充的占位符，如下所示。

我看到的大多数 JavaScript 模板库都要求您在隐藏的 DIV 或<script>标签中定义页面 HTML 中的模板 HTML......

<script id="template" type="x-tmpl-mustache">
<div>
    <ul>
      <li>{{first_name}} {{last_name}} goes by the username of: {{user_name}}</li>
    </ul>
</div>
</script>

我需要能够将模板 HTML 定义为 JavaScript 字符串，而不是像上面的方法那样......

var templateString = '<div>'+
'<ul>'+
'  <li>{{first_name}} {{last_name}} goes by the username of: {{user_name}}</li>'+
'</ul>'+
'</div>';

然后像下面这样传递给它一些 JSON，并让它将其解析为 HTML 字符串，然后我可以手动注入我的 DOM 中。

没有花哨的图书馆可以做到这一点吗？ 如果我需要一个库，有什么建议可以按照上述方式工作吗？ 正如我看到的大多数需要模板在JavaScript之外定义的那样。

JSON 数据

{  
    "1":{  
        "id":"1",
        "user_name":"jasondavis",
        "first_name":"Jason",
        "last_name":"Davis",
        "is_admin":"1",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/31b64e4876d603ce78e04102c67d6144?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/31b64e4876d603ce78e04102c67d6144?s=80&d=identicon&r=PG"
    },
    "1702c3d0-df12-2d1b-d964-521becb5e3ad":{  
        "id":"1702c3d0-df12-2d1b-d964-521becb5e3ad",
        "user_name":"Jeff",
        "first_name":"Jeff",
        "last_name":"Mosley",
        "is_admin":"1",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/5359bf585d11c5c35602f9bf5e66fa5e?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/5359bf585d11c5c35602f9bf5e66fa5e?s=80&d=identicon&r=PG"
    },
    "1d77045b-fb16-d925-b19e-52c85d82bf81":{  
        "id":"1d77045b-fb16-d925-b19e-52c85d82bf81",
        "user_name":"PortalUser",
        "first_name":"Portal",
        "last_name":"User",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/0be68519dd27dc4586ad2246e7c1c2d6?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/0be68519dd27dc4586ad2246e7c1c2d6?s=80&d=identicon&r=PG"
    },
    "4bc81f9c-992f-ed11-5c64-558f5de81a87":{  
        "id":"4bc81f9c-992f-ed11-5c64-558f5de81a87",
        "user_name":"testtest",
        "first_name":"test",
        "last_name":"test",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/309bdb7b06aeb214c4fe6963e64de168?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/309bdb7b06aeb214c4fe6963e64de168?s=80&d=identicon&r=PG"
    },
    "6ce98c71-80c8-8b04-1767-52ccdd1b7c96":{  
        "id":"6ce98c71-80c8-8b04-1767-52ccdd1b7c96",
        "user_name":"TestUser",
        "first_name":"John",
        "last_name":"Doe",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/309bdb7b06aeb214c4fe6963e64de168?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/309bdb7b06aeb214c4fe6963e64de168?s=80&d=identicon&r=PG"
    },
    "95803cf3-84ea-493a-a030-52b0abcd9b0c":{  
        "id":"95803cf3-84ea-493a-a030-52b0abcd9b0c",
        "user_name":"test",
        "first_name":"test",
        "last_name":"test",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/309bdb7b06aeb214c4fe6963e64de168?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/309bdb7b06aeb214c4fe6963e64de168?s=80&d=identicon&r=PG"
    },
    "seed_chris_id":{  
        "id":"seed_chris_id",
        "user_name":"chris",
        "first_name":"Chris",
        "last_name":"Olliver",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/9655f78d38f380d17931f8dd9a227b9f?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/9655f78d38f380d17931f8dd9a227b9f?s=80&d=identicon&r=PG"
    },
    "seed_jim_id":{  
        "id":"seed_jim_id",
        "user_name":"jim",
        "first_name":"Jim",
        "last_name":"Brennan",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/db40f846ab0a3b10522f83c6ae657e31?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/db40f846ab0a3b10522f83c6ae657e31?s=80&d=identicon&r=PG"
    },
    "seed_max_id":{  
        "id":"seed_max_id",
        "user_name":"max",
        "first_name":"Max",
        "last_name":"Jensen",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/e4f7cd8905e896b04425b1d08411e9fb?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/e4f7cd8905e896b04425b1d08411e9fb?s=80&d=identicon&r=PG"
    },
    "seed_sally_id":{  
        "id":"seed_sally_id",
        "user_name":"sally",
        "first_name":"Sally",
        "last_name":"Bronsen",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/62bc326ac7fca09505ad10b8b1e0d9c5?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/62bc326ac7fca09505ad10b8b1e0d9c5?s=80&d=identicon&r=PG"
    },
    "seed_sarah_id":{  
        "id":"seed_sarah_id",
        "user_name":"sarah",
        "first_name":"Sarah",
        "last_name":"Smith",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/62a9731a313984d2576cd2b5528c0725?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/62a9731a313984d2576cd2b5528c0725?s=80&d=identicon&r=PG"
    },
    "seed_will_id":{  
        "id":"seed_will_id",
        "user_name":"will",
        "first_name":"Will",
        "last_name":"Westin",
        "is_admin":"0",
        "gravatar_id":"http:'/'/www.gravatar.com'/avatar'/6976b4087070908d7c4c12ef3fc21d8b?s=80&d=identicon&r=PG",
        "gravatar_url":"http:'/'/www.gravatar.com'/avatar'/6976b4087070908d7c4c12ef3fc21d8b?s=80&d=identicon&r=PG"
    }
}

html => JS

将 html 模板文件合并为一个 JS 文件

模板使用模板字符串

var templateString = "<div><ul><li>{{first_name}} {{last_name}} goes by the username of: {user_name}}</li> </ul></div>";
var compiled = _.template(templateString);
compiled({ 'first_name': 'foo', last_name: "bar", user_name: "foobar" });
// → '"<div><ul><li>foo bar goes by the username of: foobar</li> </ul></div>"'

下划线/洛达什（如果您已经是这些库）

https://lodash.com/docs#template

// using custom template delimiters
_.templateSettings.interpolate = /{{(['s'S]+?)}}/g; // changing to use {{}}
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// → 'hello mustache!'

胡子

https://github.com/janl/mustache.js

.JS

function loadUser() {
  var template = $('#template').html();
  Mustache.parse(template);   // optional, speeds up future uses
  var rendered = Mustache.render(template, {name: "Luke"});
  $('#target').html(rendered);
}

.HTML

<html>
<body onload="loadUser">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello {{ name }}!
</script>
</body>
</html>

在没有任何框架的情况下更新 ES6+，你会做这样的事情：

const userHtml = (user) => { return `
    <div>
        <ul>
            <li>${user.first_name} ${user.last_name} goes by the username of: ${user.user_name}</li>
        </ul>
    </div>`;
}
const writeUsers = (articles) => {
    //where the html in the template goes
    const userListContainer = document.getElementById("userlist");
    users.forEach(user => {
        userListContainer.innerHTML += userHtml(user);
    });
}
fetch(datasrc)
    .then(response => response.json())
    .then(json => writeUsers(json));

您可能需要根据 JSON 格式对此进行一些调整。 如果您对更以 HTML 为中心的方法感兴趣，也可以查看 <template> 元素。

相关文章：