Question

我正在尝试使用模态代替Ruby中的传统“show”视图。当用户点击索引视图中的项目时，会显示模式弹出窗口，而不是将用户重定向到新的“显示”页面。

我该如何做到这一点？

让我们假设控制器看起来像这样：

@list = Items.all

我希望模态显示@list对象上每个项目的特征。例如，一个模态将显示@list [0]，另一个模式将显示为@list [1]。如何将索引值传递给模态？

Answer 1

您需要从show action

呈现javascript模板

def show
  @list = Items.all

  respond_to do |format|
    format.js { render 'your_js_template' }
  end
end

然后在您的模板中，您可以使用@list实例变量为模态创建jQuery

Answer 2

我可能采取的方法是，假设你的索引上有一个下拉菜单和一个提交按钮......

的jQuery

$('#submit').click(function(){
  $.ajax({
    url: "items/get_item",
    type: "GET",
    data: { item: $('#select').val() },
    success: function (data) {
      //Populate modal in here with item details
      $('#myModal modal-body').html(data)
    }
  });
});

项目控制器

def get_item
  return :json => Item.where({:name => params[:item]}).to_json
end

查看

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body"></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>

使用模态代替'show'视图

2 个答案: