在Bootstrap模式中渲染Rails视图

Question

我打了一堵砖墙.我一直在讨论这个问题已经很久了,我甚至不确定我是怎么到达的.我只能说,我已经尝试了以下所有方面而没有成功:

• 如何使用link_to添加bootstrap模式,以便在模态中打开链接内容？
• 如何通过rails中的JS请求显示twitter bootstrap模式？
• rails link_to:remote
• http://apidock.com/rails/ActionView/Helpers/PrototypeHelper/link_to_remote

如何在"索引"视图上的Bootstrap模式中呈现"新","编辑"和"删除"视图,而不是链接到每个单独的页面？

这是我现在的代码.现在,让我们忽略"编辑"和"删除",只关注"新".当我单击"新建"按钮时,会出现一个带有字符串"<%= j render"items/new"%>"的模式(而不是该ruby语句应该呈现的形式).我究竟做错了什么？:

items_controller.rb:

class ItemsController < ApplicationController

  def index
    @items = Item.all
  end

  def new
    respond_to do |format|
      format.js {}
    end
  end

  def create
    @item = Item.new(item_params)
    if @item.save
      flash[:notice] = "'#{@item.name}' saved!"
      redirect_to items_path
    else
      flash[:notice] = "Something went wrong :("
      render "index"
    end
  end

  def edit
    @item = Item.find(params[:id])
    respond_to do |format|
      format.js {}
    end
  end

  def update
    @item = Item.find(item_params[:id])
    if @item.update_attributes(item_params)
      flash[:notice] = "Successfully updated #{@item.name}."
      redirect_to items_path
    else
      flash[:notice] = "Oops"
      # render "edit"
    end
  end

  private
    def item_params
      params.require(:item).permit(:name, :bid, :uuid)
    end

end

项目/ index.html.erb

<div class="row">
  <div class="col-xs-12">
    <%= link_to "New", new_item_path, remote: true, class: "btn btn-success pull-right new", data: { toggle: "modal", target: "#newModal" } %>
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    <table class="table table-hover items">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>UUID</th>
          <th colspan="2">Links</th>
        </tr>
      </thead>
      <tbody>
        <% @items.each do |item| %>
          <tr>
            <td><%= item.id %></td>
            <td><%= item.name %>

              <!-- edit/remove icons -->
              <span class="edit-remove">
                <%= link_to edit_item_path(item.id), remote: true, data: { toggle: "modal", target: "#editModal" } do %>
                  <span class="glyphicon glyphicon-pencil text-muted"></span>
                <% end %>
                <a href="#">
                  <span class="glyphicon glyphicon-remove text-muted"></span>
                </a>
              </span>

            </td>
            <td><%= item.uuid %></td>
            <td><%= link_to "XXX", "http://xxx" %></td>
            <td><%= link_to "XXXX", "http://xxx", target: "_blank" %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </div>
</div>

<!-- newModal skeleton -->
<div class="modal fade" id="newModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

<!-- editModal skeleton -->
<div class="modal fade" id="editModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

<!-- deleteModal skeleton -->
<div class="modal fade" id="deleteModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

项目/ new.html.erb

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
  <h4 class="modal-title">New Item</h4>
</div>
<div class="modal-body">
  <%= form_for :item, url: { action: "create" } do |f| %>
    <div class="form-group">
      <%= f.label :name, "Name" %>
      <%= f.text_field :name, { class: "form-control" } %>
    </div>
    <div class="form-group">
      <%= f.label :bid, "BID" %>
      <%= f.text_field :bid, { class: "form-control" } %>
    </div>
    <div class="form-group">
      <%= f.label :uuid, "UUID" %>
      <%= f.text_field :uuid, { class: "form-control" } %>
    </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <%= submit_tag "Save", class: "btn btn-primary" %>
  <% end %>
</div>

Java脚本/ items.js

$(document).on("page:change", function() {
  $("#newModal .modal-content").html('<%= j render "items/new" %>');
});

Answer 1

例如,在新的情况下,您想要渲染一个javascript文件.为此,您需要创建items/new.js.erb.

另外,从您的链接中删除",data:{toggle:"modal",target:"#newModal"}",我们将在javascript中执行此操作.

  # new.js.erb
  $("#newModal .modal-content").html('<%= j render "items/form" %>');
  $("#newModal").modal(); // Or whatever the Bootstrap function is to render the modal


  # items/_form.html.slim
  # Here you'll put your form

你不能直接在视图上使用"渲染",你应该渲染局部而不是视图(这就是为什么我要求你把你的形式放到一个部分).