Question

如何将变量传递给视图外部的模型？问题是，我必须将模型移至application.html.erb，因为z-index conflicts在products/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内调用模式。

Answer 1

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

使用link_to（类似这样）使按钮成为远程方法调用：

<% products.each do |product| %>
    <%= link_to 'Launch', product, { data: { toggle: 'modal', target: '#productDetails' }, class: 'btn btn-primary btn-lg', remote: true } %> 
<% end %>

为show called products / show.js.erb创建js.erb文件（假设@product在控制器中定义）：
```
$('#productDetails').html("<%= j render partial: 'show', locals: { product: @product } %>");
```

将所有内容从模态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>

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

产品/ index.html.erb

布局/ application.html.erb

尝试

1 个答案: