Javascript 使用模态代替“显示”视图

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

我怎样才能做到这一点

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

@list = Items.all

---

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

您需要从show操作呈现javascript模板

def show
  @list = Items.all

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

---

然后，在模板中，您可以使用@list实例变量为modal创建jQuery，我可能会采用的方法是，假设索引上有一个下拉列表和一个提交按钮

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>