如何將數據從Ruby循環傳遞到純JavaScript模式（而不是Bootstrap）

Question

我想要一個由卡片代表的項目網格。 單擊每個卡片，您將獲得一個模態，其中包含項目的詳細信息（標題，橫幅圖像，描述等）。 我正在使用Middleman靜態站點生成器。

我在數據文件夾中創建了projects.yml文件：

"Project 1":
     project_id: 1
     card:
         selector: HTML5-CSS3-JavaScript
         image: project1-card.jpg
         text: Middleman · HTML5 & CSS3 · Ruby
     modal:
         title: A personal website.
         img_banner: project1-modal.jpg
         description:
             title_left: What is it?
             text_left:  A portfolio built with Middleman
             title_right: Categories
             text_right: HTML CSS Ruby Javascript
             title_middle: whatever
         body:
             title_1: My personal website with Middleman
             text_1: Lorem ipsum dolor sit amet....
         etc.....

"Project 2":
    project_id: 2
    card:
        selector: RubyOnRails
        image: project2-card.jpg
        text: Rails · HTML5 & CSS3 · Ruby
    modal: 
        title: A yelp clone
        img_banner: project2-modal.jpg
        description:
            title_left: What is it?
            text_left:  A yelp clone
            title_right: Categories
            text_right: HTML CSS Ruby Rails
            title_middle: whatever
        body:
            title_1: A yelp clone built with Rails
            text_1: Lorem ipsum dolor sit amet....
        etc.....
etc....

在projects.html.erb中，我的Ruby迭代如下：

<div class="shuffle-grid">
<% data.projects.each do |project, details| %>
    <div class="item trigger" data-category="<%= details.card.selector %>" data-modal-title="<%= details.modal.title %>" data-modal-img-banner="<%= details.modal.img_banner %>" data-modal-description-title-left="<%= details.modal.description.title_left %>" data-modal-description-text-left="<%= details.modal.description.text_left %>" data-modal-description-title-right="<%= details.modal.description.title_right %>" data-modal-description-text-right="<%= details.modal.description.text_right %>" >
        <div class="padded-card">
            <div class="img-container"><%= image_tag <%= details.card.image %> %></div>
            <div class="text-padd">
                <div><h3><%= project %></h3></div>
                <div><h4><%= details.card.text %></h4></div>
            </div>
       </div>
  </div >
<% end %>
</div>

然后是模式：

<div class="modal-overlay closed" id="modal-overlay"></div>
<div class="modal closed" id="modal">
    <button class="close-button" id="close-button">Close</button>
    <div class="modal-inner">
        <div id='title-id'></div>
        <div id='image-id'></div>
        <div id='description-title_left-id'></div>
        <div id='description-text_left-id'></div>
        <div id='description-title_right-id'></div>
        <div id='description-text_right-id'></div>
        etc...
    </div>
</div>

顯然，我知道我發現的解決方案很笨拙，它在數據屬性中一個接一個地傳遞所有參數，並在我的javascript中檢索它們：

 window.onload = function () {
    'use strict';
     var modal = document.querySelector("#modal");
     var modalOverlay = document.querySelector("#modal-overlay");
     var closeButton = document.querySelector("#close-button");

     closeButton.addEventListener("click", function() {
         modal.classList.toggle("closed");
         modalOverlay.classList.toggle("closed");
     });

    $('.trigger').on('click', function() {
        $('#title-id').html($(this).data('modal-title'));
        var modal_img_banner = $(this).attr('data-modal-img-banner');
        var img_to_insert = "<img src=/images/" + modal_img_banner + ">";
        $('#image-id').html(img_to_insert);
        $('#description-title_left-id').html($(this).data('modal-description-title-left'));
        etc...
        modal.classList.toggle("closed");
        modalOverlay.classList.toggle("closed");
   });
};

在這種情況下最好的解決方案是什么？ 有沒有一種方法可以只將每個項目的ID傳遞給模態，然后使該ID直接將每個數據填充到視圖中？

如果我使用的是Bootstrap模態，這就是我可以使用data-target完成的工作：

<div class="shuffle-grid">
    <% data.projects.each do |project, details| %>
        <div class="item project_id-<%= project_id %>" data-category="<%= details.card.selector %>" data-toggle="modal" data-target="#modal-project-<%= project_id %>">
            <div class="padded-card">
                <div class="img-container"><%= image_tag <%= details.card.image %> %></div>
                <div class="text-padd">
                    <div><h3><%= project %></h3></div>
                    <div><h4><%= details.card.text %></h4></div>
                </div>
           </div>
      </div >
    <% end %>
</div>

並在模式中：

<div class="modal fade" id="modal-project-<%= project_id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-container">
                <div class="modal-banner">
                    <h2 class="modal-title" id="myModalLabel"><%= details.modal.title %></h2>
                    <%= image_tag details.modal.img_banner %>
                </div>
                <div class="modal-description">
                    <div class="left-col flex1">
                        <div><h4><%= details.modal.description.title_left_1%></h4>
                etc....
                </div>
            </div>
        </div>
    </div>
</div>

我想念的訣竅是什么？ 基本上，我想使用Bootstrap進行相同的操作，但是要使用普通的JavaScript模式。

謝謝你們！

Answer 1

大概在我當時考慮得太多了，但是Middleman vs Rails並沒有什么特別之處。 基於使用jQuery的簡單自定義彈出窗口並重用我上面提到的所有代碼（包括相同的projects.yml），這是我可以做的一個例子：

<div class="shuffle-grid">
  <% data.projects.each do |project, details| %>
  <div class="open-me" data-modal-idx="<%= details.project_id %>">
    <div class="padded-card">
      <div class="img-container"><%= image_tag <%= details.card.image %> %></div>
      <div class="text-padd">
        <div><h3><%= project %></h3></div>
        <div><h4><%= details.card.text %></h4></div>
      </div>
    </div>
  </div >
  <div style="display: none" class="pop-outer" id="pop-outer-<%= details.project_id %>">
    <div class="pop-inner">
      <button class="close-me">X</button>
      <h2>This is a custom pop-up example for card id n°<%= details.project_id %></h2>
      <p><%= details.modal.title %></p>
      <%= image_tag details.modal.img_banner %>
      (...)
    </div>
  </div>
  <% end %>
</div>

模態位於卡內，jQuery如下所示：

$(document).ready(function(){
  $('.open-me').click(function(){
    var idx = $(this).attr('data-modal-idx');
    var modalOpenMe = $('#pop-outer-' + idx);
    modalOpenMe.fadeIn("slow");
    modalOpenMe.find('.close-me').click(function(){
      modalOpenMe.fadeOut("slow");
    });
  });
});

彈出的一些css：

.pop-outer {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pop-inner {
  background-color: #ffff;
  width: 500px;
  height: 350px;
  padding: 30px;
  margin: 15% auto;
}

如何將數據從Ruby循環傳遞到純JavaScript模式（而不是Bootstrap）

問題描述

1 個解決方案

解決方案1
0 2018-02-12 17:32:24

如何將數據從Ruby循環傳遞到純JavaScript模式（而不是Bootstrap）

問題描述

1 個解決方案

解決方案1 0 2018-02-12 17:32:24

解決方案1
0 2018-02-12 17:32:24