将视图中的变量从视图传递到模型

时间:2015-10-24 10:37:35

标签: ruby-on-rails ruby twitter-bootstrap

如何将变量传递给视图外部的模型?问题是,我必须将模型移至application.html.erb,因为z-index conflictsproducts/index.html.erb视图中有模态代码。

例如,我想将<%= product.id %>变量传递给模态弹出窗口。

产品/ index.html.erb

<% products.each do |product| %>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#productDetails" productId="<%= product.id %>">
        Launch <%= product.id %>
    </button>
<% end %>

布局/ application.html.erb

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <%= stylesheet_link_tag 'application' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<body>
    <div id="page-wrapper">
        <%= render 'layouts/header' %>
        <%= yield %>
        <%= render 'layouts/footer' %>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="productDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body product-content">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

</body>
</html>

尝试

我尝试添加javascript来传递变量,但没有出现任何内容:

<script>
$('#productDetails').on('show.bs.modal', function(e) {

    var $modal = $(this),
        productId = e.relatedTarget.productId;

    $.ajax({
        cache: false,
        type: 'POST',
        url: 'backend.php',
        data: 'EID=' + productId,
        success: function(data) {
            $modal.find('.product-content').html(productId);
        }
    });
})
</script>

我还尝试在products/index.html中添加部分内容,但由于z-index冲突,无法在products/index.html.erb内调用模式。

1 个答案:

答案 0 :(得分:1)

我不知道php部分是什么。但是,忽略那个部分,并假设没有人会这样做,这就是你在rails中处理这个问题的方法:

  1. 使用link_to(类似这样)使按钮成为远程方法调用:

    <% products.each do |product| %>
        <%= link_to 'Launch', product, { data: { toggle: 'modal', target: '#productDetails' }, class: 'btn btn-primary btn-lg', remote: true } %> 
    <% end %>
    
  2. 为show called products / show.js.erb创建js.erb文件(假设@product在控制器中定义):

    $('#productDetails').html("<%= j render partial: 'show', locals: { product: @product } %>");
    
  3. 将所有内容从模态div下移到产品/ _show.html.erb partial:

    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body product-content">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>