如何基于JSON创建页面部分

检查jqote2取决于jQuery或underscore的_template方法

http://aefxx.com/jquery-plugins/jqote2/
http://documentcloud.github.com/underscore/

你的json示例需要用'"

var x = _.template("hello world a is <%= a %>, <% for (var i=0; i < 4; i++) { %> <%= i %>     <% } %>", {a: 77});

x;//# =>

我尝试了一下div部分。我是在脑子里写的，所以可能会有拼写错误等，但可以给你一个想法

for (var i=0; i< jsonDesc.length; i++) {
  $("<div>").attr("id", "fragment-"+(i+1))
      .addClass("ui-tabs-panel")
      .append$("<img>").attr("src", jsonDesc[i].Items.MediaUrl)
      .append(
          $("<div>").addClass("info").append(
              $("<h2>")
                  .append("<a>").attr("href", "#").html(jsonDesc[i].Items.AlternativeText)
            )
        );
  if (i>0) {
    $("#fragment-"+(i+1)).addClass ("ui-tabs-hide");
}

从内存中的虚拟元素开始。如果您在内存中构建HTML并一次性将其插入DOM，而不是重复地写入DOM，那么整个过程将快100倍。

var myOutput = document.createElement('div')

然后循环遍历数据并将内容追加到"myOutput"中，直到完成。

$(myOutput).append(....)

参见:http://api.jquery.com/append/

然后追加到页面中:

$('body').append(myOutput)

你应该看看这个问题和答案。

如果它不适合你，尝试谷歌"Javascript模板"。

你可能想看看客户端模板机制，比如jQuery。tmpl或嵌入式JavaScript。EJS示例中的选项卡部分如下所示:

<% $.each(Items, function(index, item) { %>
    <div id="fragment-1" class="ui-tabs-panel" style="">
        <img src="<%= item.MediaUrl %>" alt="" />
         <div class="info" >
            <h2><a href="#" ><%= item.AlternativeText %></a></h2>
            <p><%= item.Description %></p>
         </div>
    </div>
<% } %>

Plain JS:

<script>
var res = {
  "Context": null,
  "IsGeneric": false,
  "Items": [
    {
      "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a>",
      "MediaUrl": "'/images'/image1.jpg",
      "AlternativeText": "15+ Excellent High Speed Photographs",
      "Height": 1050,
      "ThumbnailUrl": "'/images'/image1-thb.jpg",
      "Width": 1680
    },
.
.
.
  ]
}
window.onload=function() {
  var container = document.getElementById("featured");
  for (var i=0, n=res.Items.length;i<n;i++) {
    var item = res.Items[i]
    var div = document.createElement("div");
    div.id = "fragment-"+(i+1);
    div.className="ui-tabs-panel"; 
    div.style="";
    var img = document.createElement("img");
    img.src=item.MediaUrl;
    img.alt=item.AlternativeText
    var innerDiv = document.createElement("div");
    innerDiv.className="info";
    var header = document.createElement("h2");
    var link = document.createElement("a");
    link.href="#";
    link.innerHTML=item.description;
    header.appendChild(link);
    innerDiv.appendChild(header);
    div.appendChild(img);
    div.appendChild(innerDiv);
    container.appendChild(div);
  }
}  
</script>
<div id="featured" >
      <ul class="ui-tabs-nav">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
      </ul>
</div>

我将使用微软的新(仍处于测试阶段)jQuery tmpl插件。这比自己手工构建DOM元素要简洁得多。

您的问题的完整实现示例在这里。

这会生成你想要的html，但是它看起来不太好，因为缺少图像和css类。

使用DOMBuilder，您可以这样做:

DIV({id: "featured"},
  UL({"class": "ui-tabs-nav"},
    LI.map({"class": "ui-tabs-nav-item"}, items, function(item, attrs, idx) {
      attrs["id"] = "nav-fragment-" + (idx + 1);
      if (idx === 0) {
        attrs["class"] += " ui-tabs-selected";
      }
      return A({href: "#fragment-" + (idx + 1)},
        IMG({src: item.ThumbnailUrl, alt: ""}),
        SPAN(item.AlternativeText)
      );
    })
  ),
  DOMBuilder.fragment.map(items, function(item, idx) {
    return DIV({id: "fragment-" + (idx + 1), "class": "ui-tabs-panel"},
      IMG({src: item.MediaUrl, alt: ""}),
      DIV({"class": "info"},
        H2(A({"href": "#"}, item.AlternativeText)),
        P({innerHTML: item.Description})
      )
    );
  })
)

如果DOM方法开始变得明显缓慢，您还可以使用完全相同的代码构建相应的HTML，以便使用innerHTML进行插入(包括注册您定义的任何事件处理程序)。

jQuery模板对于这种事情是完美的。

看看我用你的样本数据创建的这个提琴:http://jsfiddle.net/subhamsaha1004/ct3sw/

它包含了一个基本的模板功能，使创建html更容易。它使用纯javascript。代码一直保持非常简单，因为目的只是创建一个可以进一步构建的演示。

var Parser = {
    template: '<div class="slide"><img src="{{imgsrc}}" alt="" /><div class="info" ><h2><a href="#" >{{title}}</a></h2><p>{{description}}</p></div></div>',
    compile: function(template, data) {
        template = template.replace(/'{'{imgsrc'}'}/g, data.MediaUrl).replace(/'{'{title'}'}/g, data.AlternativeText).replace(/'{'{description'}'}/g, data.Description);
        return template;
    },
    parse: function(response) {
        var tpl = '', i = 0, len = 0, html = '';
        for(i = 0, len = response.length; i < len; i++) {
            tpl = this.template;
            html += this.compile(tpl, response[i]);
        }
        return html;
    }
};

查看整个代码