2016-10-11 13 views
0

私のHTMLとアンダースコアには、各ループを通して実行される単一のオブジェクト(名前、電話、場所など)のデータが含まれているので、データベースのすべてのオブジェクトが同じ内容のページに印刷されます。これらのオブジェクトをブートストラップの2つの列(つまり、col-xs-6ともう1つのcol-xs-6)に挿入して、応答性の高いものにしたいと思います。どのようにコードを複製せずにこれを行うのですか?2つのブートストラップカラムにアンダースコアのデータを挿入しますか?

HTML:

<% _.each(profile.team_members, function(t) { %> 
      <div class="row clearfix bio"> 
       <div class="col-xs-6"> 
        <div class="bio_content"> 
         <% if(t.first_name || t.last_name){ %> 
          <h3 itemprop="name"><%= t.first_name %> <%=t.last_name %></h3> 
         <% } %> 
         <% if(t.member_title){ %> 
          <div class="subtitle"><%= t.member_title %></div> 
         <% } %> 
         <dl class="info-list"> 
          <% if(t.team_member_licenses && t.team_member_licenses.length > 0) { %> 
           <dt>Licensed In:</dt> 
           <dd> 
            <% if(Array.isArray(t.team_member_licenses)) { %> 
             <%= t.team_member_licenses.join(", ") %> 
            <% } else { %> 
             <%= t.team_member_licenses %> 
            <% } %> 
           </dd> 
          <% } %> 
          <% if(t.team_member_location){ %> 
           <dt>Location:</dt> 
           <dd><%= t.team_member_location %></dd> 
          <% } %> 
          <% if(t.team_member_phone){ %> 
           <dt>Office:</dt> 
           <dd><a itemprop="telephone" class="contact-link color-accent" href="tel:<%=t.team_member_phone_link_formatted%>"><%=t.team_member_phone%></a></dd> 
          <% } %> 
          <% if(t.team_member_fax){ %> 
           <dt>Fax:</dt> 
           <dd><a class="contact-link color-accent" href="tel:<%=t.team_member_fax_link_formatted%>"><%=t.team_member_fax%></a></dd> 
          <% } %> 
          <% if(t.team_member_email){ %> 
           <dt>Email:</dt> 
           <dd><a class="contact-link color-accent" href="mailto:<%=t.team_member_email%>"><%=t.team_member_email%></a></dd> 
          <% } %> 
         </dl> 
        </div> <!--content --> 
       </div><!-- /col-lg-12 --> 
      </div><!-- /row --> 
     <% }); %> 

答えて

1

ここでのトリックはすべてのも、反復の開始時に<div class="row clearfix bio">を印刷し、すべての奇数反復の終わりに</div>を印刷することです。

<% _.each(profile.team_members, function(t,index) { %> 
    <% if(index % 2 == 0){ %> 
    <div class="row clearfix bio"> 
    <% } %> 
     //6 column div printed every iteration 
<% if(index % 2 == 1){ %> 
    </div><!-- /row --> 
<% } %> 

全コード:

<% _.each(profile.team_members, function(t,index) { %> 
     <% if(index % 2 == 0){ %> 
      <div class="row clearfix bio"> 
     <% } %> 
      <div class="col-xs-6"> 
       <div class="bio_content"> 
        <% if(t.first_name || t.last_name){ %> 
         <h3 itemprop="name"><%= t.first_name %> <%=t.last_name %></h3> 
        <% } %> 
        <% if(t.member_title){ %> 
         <div class="subtitle"><%= t.member_title %></div> 
        <% } %> 
        <dl class="info-list"> 
         <% if(t.team_member_licenses && t.team_member_licenses.length > 0) { %> 
          <dt>Licensed In:</dt> 
          <dd> 
           <% if(Array.isArray(t.team_member_licenses)) { %> 
            <%= t.team_member_licenses.join(", ") %> 
           <% } else { %> 
            <%= t.team_member_licenses %> 
           <% } %> 
          </dd> 
         <% } %> 
         <% if(t.team_member_location){ %> 
          <dt>Location:</dt> 
          <dd><%= t.team_member_location %></dd> 
         <% } %> 
         <% if(t.team_member_phone){ %> 
          <dt>Office:</dt> 
          <dd><a itemprop="telephone" class="contact-link color-accent" href="tel:<%=t.team_member_phone_link_formatted%>"><%=t.team_member_phone%></a></dd> 
         <% } %> 
         <% if(t.team_member_fax){ %> 
          <dt>Fax:</dt> 
          <dd><a class="contact-link color-accent" href="tel:<%=t.team_member_fax_link_formatted%>"><%=t.team_member_fax%></a></dd> 
         <% } %> 
         <% if(t.team_member_email){ %> 
          <dt>Email:</dt> 
          <dd><a class="contact-link color-accent" href="mailto:<%=t.team_member_email%>"><%=t.team_member_email%></a></dd> 
         <% } %> 
        </dl> 
       </div> <!--content --> 
      </div><!-- /col-lg-12 --> 
     <% if(index % 2 == 1){ %> 
     </div><!-- /row --> 
     <% } %> 
    <% }); %> 
関連する問題