0

JSONオブジェクトに従って動的にhtmlページを作成したいのですが、メソッドを実装しました。現在のコードは以下のとおりです。

$(function(){
    var result =JSON.parse(response);
    var markup="";
    for (var i=0;i<result.length;i++) {
        markup+="<div id='nameDiv'>"+result[i].name+"</div>"; 
    }
    $('.divLoadData:last').after(markup);
});

しかし、私の実際のマークアップはこのようなものです

 <div class="divLoadData">
     <div class="name" id="nameDiv">
         Name
     </div>
     <div class="numberb">
         <div id="age">
             Age
         </div>
     </div>
     <div class="numberb dob">
         <div id="dob">
             DOB
         </div>
     </div>
 </div>

最終的には成長するため、現在の方法ではこの種のマークアップを作成できないため、同じことを行う他の方法はありますか。

4

1 に答える 1

3

jQuery Tmpl (jQuery Template) が必要だと思います。

https://github.com/BorisMoore/jquery-tmpl

テンプレートをセットアップして、それを JSON データにバインドするだけです。それはあなたのためにhtmlを構築します。

簡単な例として

$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );

あなたのケースの例に合わせて

var movies = [
      { Name: "The Red Violin", ReleaseYear: "1998" },
      { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
      { Name: "The Inheritance", ReleaseYear: "1976" }
    ];

  var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

  // Compile the markup as a named template
  $.template( "movieTemplate", markup );

  // Render the template with the movies data and insert
  // the rendered HTML under the "movieList" element
  $.tmpl( "movieTemplate", movies )
      .appendTo( "#movieList" );

この助けを願っています。

于 2013-10-01T04:44:51.533 に答える