将JSON数据的基本JavaScript模板转换为JavaScript变量的模板字符串

Question

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

我看到的大多数JavaScript模板库都要求您在页面HTML的内部定义模板HTML，无论是在隐藏的DIV中还是在<script>标记中。

<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>

我需要能够将模板定义为一个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"
    }
}

Answer 1

html => JS

combine html template files into one JS file

使用templateString的模板

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>

Answer 2

在没有任何框架的情况下对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>元素。