Rails 4在erb中傳遞JavaScript變量

Question

我想動態顯示項目列表，但是按行顯示的項目數取決於屏幕的寬度。 大屏幕內的數字取決於屏幕尺寸...如果是大屏幕：

<% @posts.each_slice(3) do |s| %>
  <div class="row">
    <% s.each do |p| %>  
     <div class="small-12 medium-6 large-4 columns">

如果是中等屏幕：

<% @posts.each_slice(2) do |s| %>
  <div class="row">
    <% s.each do |p| %>  
      <div class="small-12 medium-6 large-4 columns">

任何人都知道如何在js變量中

each_slice("javascript vairable") 

謝謝

Answer 1

我找到了一個方法。 我使用Jquery通過以下命令檢查窗口的大小：（咖啡腳本）

n=2
if $('body').width() > 1025
  n = 3
if $('body').width() > 640
  $(".break:nth-child("+n+"n").addClass "row"

html.erb看起來像這樣：

<div class="row">
  <% @posts.each do |p| %>
    <div class="break">
      <div class="small-12 medium-6 large-4 columns">

然后用jquery選擇第n個div並添加一個類行。 它不是完美的，但可以。

Answer 2

JavaScript不可能按照您描述的方式與ERB進行交互。 服務器不知道或不在乎客戶端的屏幕大小。

您正在使用ZURB Foundation標記，對嗎？ 如果您確實希望服務器根據屏幕大小更改標記，請考慮使用Foundation的Interchange功能 。

您需要為要定位的每種屏幕尺寸引用一個單獨的URL。 （通過URL參數或為每種尺寸創建單獨的操作。）Rails會根據Interchange調用的URL輸出不同的標記。

Answer 3

這聽起來確實像是CSS媒體查詢的工作。 從CSS類名稱判斷，您已經在使用某種網格系統。

<% @posts.each do |s| %>
  <div class="small-12 medium-6 large-4 columns">

然后在CSS中：

@media (screen and max-width: 800px) {
  .medium-6 {
    width: 200px;
  }
}

@media (screen and max-width: 1000px) {
  .large-4 {
    width: 400px;
  }
}

您必須擺弄寬度值才能獲得所需的效果。