Question

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

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

这是我现在的代码。现在，让我们忽略“编辑”和“删除”，只关注“新”。当我单击“新建”按钮时，一个带有字符串“＆lt;％= j render”items / new“％＆gt;”的模态出现（而不是该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>

Javascript角/ items.js

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

Answer 1

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

此外，删除＆＃34;，数据：{toggle：＆＃34; modal＆＃34;，target：＆＃34; #newModal＆＃34; }＆＃34;从您的链接，我们将在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

你不能使用＆＃34;渲染＆＃34;直接在视图上，你应该渲染局部而不是视图（这就是为什么我要求你把你的形式变成局部的）。

Answer 2

我把它扔在一起，加载后3秒钟我的文档中放了一个大的'3'：

<script>
setTimeout(function() {
    $("#holder").html("<%= j render(:file => 'things/test.html.erb') %>");
}, 3000);
</script>
<div id="holder></div>

应用/视图/东西/ test.html.erb ：

<h1><%= 1 + 2 %></h1>

这应该让你去。

在Bootstrap模式中渲染Rails视图

2 个答案: