如何从json调用HTML文件以在模板中加载它们

I am working on a project which displays HTML content from a json file. Based on the id, the content of the page is displayed.

我正在开发一个显示来自json文件的HTML内容的项目。根据id,显示页面内容。

It is tedious to write HTML content inside json, how can I avoid this and maintain separate HTMl files and call them based on the id's in the json file

在json中编写HTML内容很繁琐,如何避免这种情况并维护单独的HTMl文件并根据json文件中的id调用它们

{
  "id": 0,
  "name": "1st page",
  "type": "Info",
  "content": [
        "<h2>Heading</h2>"
      ],
  "active": false
}

The content loads in the template :-

内容在模板中加载: -

<h1>Template 1</h1> 
{{{content}}}

4 个解决方案

#1

You can load html files in a element using jquery:

您可以使用jquery在元素中加载html文件:

$( "div" ).load( "test.html" );

#2

Two thing you could do:

你可以做两件事:

You can use a template engine like handlebars and use the json data to inject values inside a template and render it.

您可以使用像把手一样的模板引擎,并使用json数据在模板中注入值并进行渲染。
Or, you could build html on the fly using the json and render it.

或者,您可以使用json动态构建html并渲染它。

My vote would be to use a template engine if you are generating way too much html.

如果你生成太多的HTML,我的投票将是使用模板引擎。

#3

you can use .load(). Please check it out here http://api.jquery.com/load/

你可以使用.load()。请在这里查看http://api.jquery.com/load/

Instead of passing html content in content of your json, Just pass the html file name and use .load to load that particular file

不要在json的内容中传递html内容,只需传递html文件名并使用.load来加载该特定文件

#4

Actually there many library to do that templating js like

实际上有许多图书馆要做那些模板化的js

Choose your Best option

选择您的最佳选择

dustJS (created by linkedin)

dustJS(由linkedin创建)

http://jsfiddle.net/jaltez/e8hmc/

HandlebarsJS (simple code see jsfiddle link)

HandlebarsJS(简单代码见jsfiddle链接)

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

var data = { 
    users: [ { 
        person: {
            firstName: "Garry", 
            lastName: "Finch"
        },
        jobTitle: "Front End Technical Lead",
        twitter: "gazraa" 
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch"
        }, 
        jobTitle: "Photographer",
        twitter: "photobasics"
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch"
        }, 
        jobTitle: "LEGO Geek",
        twitter: "minifigures"
    } ]
}; 

Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

$('body').append(template(data));

http://jsfiddle.net/aybalasubramanian/N2b5M/1/

and

independent js frameworks

独立的js框架

ANGULARJS

http://jsfiddle.net/mjaric/pj5br/

BackboneJS with combination with Handlebarjs

BackboneJS与Handlebarjs结合使用

http://jsfiddle.net/cmckeachie/tM87J/light/

#1