JsRenderを使用して単純な配列データから行/列レイアウトを作成します

Question

jsrenderを使用して、ブートストラップベースのHTMLテンプレートを作成し、javascriptを使用してHTMLコンテンツをレンダリングしています。

var data = [ 
    { 
     'img': 'img/books/kiterunner.jpg', 
     'title': 'The Kite Runner', 
     'authors': 'Khaled Hosseini' 
    }, 
    { 
     'img': 'img/books/tokillamockingbird.jpg', 
     'title': 'To Kill A Mocking Bird', 
     'authors': 'Harper Lee' 
    }, 
    { 
     'img': 'img/books/hungergames.jpg', 
     'title': 'The Hunger Games', 
     'authors': 'Suzanne Collins' 
    } 
    ..... 
] 

をたどり、現在data内の各オブジェクトを個別に時々表示されます

<div class="row-fluid" id="result"> 
    <script id="template" type="text/x-js-render"> 
     <div class="col-md-3 col-sm-6"> 
      <div class="image-tile outer-title text-center"> 
       <img alt="{{:title}}" src="{{:img}}" style="max-height:350px;"> 
       <div class="title mb16"> 
        <h5 class="uppercase mb0">{{:title}}</h5> 
         <span>{{:authors}}</span> 
       </div> 
      </div> 
     </div> 
    </script> 
</div> 

次のように私が生成する対応するHTMLがあるとして、私のデータは、画像のサイズが大きく、混乱させる行が見える方法。ですから、4のオブジェクトがすべてdataになるたびに、コンテンツを含むdiv.row-fluidの作成を繰り返す必要があります。私は現在、テンプレートを登録し、必要なHTMLにデータをレンダリングするために次のことを行います。 dataの値を変更せずに{{for}}を使用する方法を理解できないようです。

ありがとうございます。

編集：私は、明示的なHTMLの文字列の連結をやって、その後div.row-fluidニーズを作成するかどうかを決定するためにif文でindex%4を使用しながら、それらをレンダリングすることにより、これを行うために管理しています。しかし、もっと洗練されたソリューションが本当に好きです。 jqueryタグを追加すると、より広い視認性が得られます。

Answer 1

カスタム{{range}}タグを使用できます。this sampleを参照してください。

はここ4でグループ化された<td> sのテーブルにレンダリングする例である - 4列のレイアウトのために：

$.views.tags("range", function(array) { 
    var ret = "", 
    start = this.tagCtx.props.start, 
    end = this.tagCtx.props.end, 
    max = this.tagCtx.props.max; 

    end = end > max ? max : end; 

    for (var i = start; i <= end; i++) { 
    // Render tag content, for this data item 
    ret += this.tagCtx.render(array[i]); 
    } 
    return ret; 
}); 

var data = {rows: [ 
    { 
     'title': ... 
    }, 
    ... 
    ]}; 

    ...