Question

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

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

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

内容在模板中加载： -

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

Answer 1

您可以使用jquery：

在元素中加载html文件

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

Answer 2

你可以做两件事：

您可以使用handlebars之类的模板引擎，并使用json数据在模板中注入值并进行渲染。
或者，您可以使用json动态构建html并进行渲染。

如果您生成太多html，我的投票将是使用模板引擎。

Answer 3

你可以使用.load（）。请在此处查看http://api.jquery.com/load/

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

Answer 4

实际上有许多图书馆可以像

那样进行模板化

选择最佳选项

dustJS（由linkedin创建）

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

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/

和

独立的js框架

ANGULARJS

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

BackboneJS与Handlebarjs结合

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

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

4 个答案: