如何在Rails視圖中對each_slice（）使用變量

我想根據屏幕大小爲我的rails視圖中的each_slice（）使用一個變量和另一個解決方案。我使用引導程序，例如，我想根據屏幕大小在同一行中顯示不同數量的項目。如何在Rails視圖中對each_slice（）使用變量

我通常使用Meteor框架，它具有句柄if語句並可以做我正在尋找的東西。由於我沒有使用過Rails，我想知道是否有類似的東西。

引導列： col-md-4 --> each_slice(3) col-sm-6 --> each_slice(2) col-sm-6 --> each_slice(1)

下面是它看起來像現在：提前

<div class="items"> 
    <% @items.each_slice(3) do |items| %> 
    <div class="col-sm-12"> 
     <% items.each do |item| %> 
     <div class="col-md-4 col-sm-6 col-xs-12"> 
      <div class="name item-header"> 
      <%= item.name %> 
      </div> 
      <div class="item description"> 
      <div class="collection"> 
       Collection: <%= item.collection %> 
      </div> 
      <div class="price"> 
       <%= item.price %>$ 
      </div> 
      </div> 
     </div> 
     <% end %> 
    </div> 
    <% end %> 
</div>

感謝您的幫助！

來源

2016-02-09 RickRoberts

根據屏幕尺寸顯示不同數量的項目將需要您的服務器知道它沒有的屏幕尺寸（這是可能的，但通常是一個壞主意）。 CSS是這些東西的野獸，所有你需要做的就是創建一個網格（你已經使用引導網格），並通過媒體查詢顯示/隱藏元素。 – SidOfc

是的，但由於項目div是不同的高度，我不想要一個最低高度和自舉網格不能解決問題。此外，我不能隱藏某些項目，因爲它們都需要顯示......仍然不確定爲什麼你投下了這個問題。 – RickRoberts

我低估了這個問題，因爲它是一個CSS問題，而不是服務器端問題。除了定義（渲染HTML，類等等）它併發送使用這些定義的資源（CSS，JS等）之外，服務器所做的不應該對佈局做任何事情。但回到問題 - 你要求我們找到一個[XY問題]的解決方案（http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem）。這意味着你在解決問題的嘗試中解釋了一個問題，而不是真正的問題，也許（可能）有更好的方法來解決你的問題。 – SidOfc

即使屏幕尺寸發生變化，也有解決方案，但它包括渲染片（3），片（2）和片（1）。

<div class="items"> 
    <% @items.each do |item| %> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <div class="name item-header"> 
     <%= item.name %> 
     </div> 
     <div class="item description"> 
     <div class="collection"> 
      Collection: <%= item.collection %> 
     </div> 
     <div class="price"> 
      <%= item.price %>$ 
     </div> 
     </div> 
    </div> 
    <% end %> 
</div>

不要使用slice，只使用純each和引導將做的工作。

來源

2016-02-09 15:36:33 Nermin

謝謝Nermin，聽起來像一個好主意，但只會隱藏它們並渲染它們3次。如果我有更多的項目，這可能會導致頁面放慢速度？ – RickRoberts

@RickRoberts我改變了我的解決方案，這將只與1渲染 – Nermin

我使用each_slice（）的原因是所有的div有不同的高度，我不能把最低高度。沒有each_slice（），佈局看起來就像垃圾。 – RickRoberts

運行到具有可變高度自舉列標記的相同佈局問題。

如果沒有使用切片來實際關閉行之間最後的引導行和列結構，則引導佈局會崩潰。

我正在使用Bootstraps響應標籤...您可以添加更多的屏幕尺寸/切片切換器以及...如果屏幕手動調整大小而無需刷新，但可以遇到問題，但生成的佈局是您將擁有的所有沒有切片的時間。

<div class="items"> 

<div class="hidden-sm"> 
    <% @items.each_slice(3) do |items| %> 
</div> 
<div class="visible-sm"> 
    <% @items.each_slice(2) do |items| %> 
</div> 
    <div class="col-sm-12"> 
     <% items.each do |item| %> 
     <div class="col-md-4 col-sm-6 col-xs-12"> 
      <div class="name item-header"> 
      <%= item.name %> 
      </div> 
      <div class="item description"> 
      <div class="collection"> 
       Collection: <%= item.collection %> 
      </div> 
      <div class="price"> 
       <%= item.price %>$ 
      </div> 
      </div> 
     </div> 
     <% end %> 
    </div> 
    <% end %> 
</div>

我用另一種方法是像馬賽克電網館一些JavaScript，但更喜歡切片，因爲它使的div爲了不遍佈移動它們。

來源

2016-05-08 01:06:27 somecalmetim

如何在Rails視圖中對each_slice（）使用變量

回答

相關問題