ruby-on-rails – 在Bootstrap模式中渲染Rails视图

> How to add bootstrap modal with link_to so the link content open in modal ?
> How to show twitter bootstrap modal via JS request in rails?
> 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),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" %>');
});