将 json 列表动态绑定到 HTML

Question

我从数据库中得到一个 JSON 数组对象列表。

这在当前用户控件的页面加载时被吐到客户端

    var json = new JavaScriptSerializer();
    var jsonList = json.Serialize(mylList);             
    Page.ClientScript.RegisterStartupScript(this.GetType(), "HomeCarouselScript", string.Concat("<script type='text/javascript'> var carouselData = ", jsonList, ";</script>"));

json结构是这样的 json 具有称为 Active 的对象集合。 每个活动对象都有名为 Name、Lastname、Address 的属性

我想在这个结构中显示所有对象到 HTML div 对于每个存在的对象，我们可以将以下模板添加到主容器中。对于 j 儿子列​​表中的每个现有对象，我正在尝试将其添加到主 div 容器中。

<div id="maincontainer">
   <div class="item">
         Object.Name
         <div class="subcategory">
            <h4>
              Object.Age
            </h4>
            <p>               
             Object.Address
            </p>
          </div>
     </div>

Answer 1

您可以使用诸如 Mustache 或 Handlebars 之类的 HTML 模板引擎，并将您的标记变成如下内容：

{{#each item}}  
      <div class="item">
        {{Name}}
          <div class="subcategory">
            <h4>
              {{Age}}
            </h4>
            <p>               
              {{Address}}
            </p>
          </div>
      </div>
{{/each}}