Question

我正在开发一个Web应用程序，其中标签和关键字根据不同的客户而变化。

考虑我有一个html页面：

<div>
  <p id="name"> Google </p>
  <p id="type"> Software </p>
  <p id="region"> California </p>
</div>

现在我想改变Facebook，社交媒体，英国等所有内容的价值。

有一种直接的方法可以将其改为

$("#name").text("Facebook"); and so on

但我不想这样做：

我想做一些像django那样的模板语言。

<div>
  <p id="name"> {{ name }} </p>
</div>

我将根据要求从json或js传递name的值。

所以，我的问题是jquery或bootstrap中有任何插件来实现这种需求。???

Answer 1

<强> HTML

<div>
  <p id="name"> Google </p>
  <p id="type"> Software </p>
  <p id="region"> California </p>
</div>

<强>的jQuery

obj = '{"name": "Facebook","type":"Social Media","region":"UK"}';
$.each($.parseJSON(obj), function(key,value){
    $("#"+key).text(value);
});

Demo

Answer 2

是的，您可以使用jqtemplates来实现这一目标。 fiddle demo

<script type="text/x-jquery-tmpl" id="jqTemplate"> 
  <div>
    <p>${name}</p>
    <p>${type}</p>
    <p>${region}</p>
  </div> 
 </script> 
 <div id="myDiv"><div>

var json = {
    "name": "Google",
    "type": "Software",
    "region": "California"
};

$( "#jqTemplate" ).tmpl(json).appendTo("#myDiv");

通过单独的js文件设置HTML值

2 个答案: