javascript - Rails 4 - 使用 AJAX/JS 渲染部分

Question

我需要向我的 Rails 应用程序添加一些 AJAX/JS 功能。

这是我正在处理的页面:

要显示上面选项卡的内容，我正在调用

<%= render 'tape_bulk_cocs/sporeCounts' %>

此部分内包含以下代码(减去用于显示文本的 html 标记):

 <div id="samples">
    <% if @tape_bulk_coc.tape_bulk_coc_samples.any? %>    
       <% @tape_bulk_coc.tape_bulk_coc_samples.each do |cur| %>  
          <% if !cur.spore_type_count %>
             <%= link_to 'Add Spore Count', new_spore_type_count_path(:tape_bulk_coc_sample_id=>cur.id), :remote=>true, :id => "new_spore_count", class: "tiny button expanded" %>
          <% end %>
       <% end %>
    <% end %>
 </div>

在我的spore_type_counts_controller/new里面我有:

  def new
    @spore_type_count = SporeTypeCount.new
    @tape_bulk_sample_id = params[:tape_bulk_coc_sample_id]
    @category_count = [["Rare: 1 to 10","Rare: 1 to 10"], ["Low: 11 to 100","Low: 11 to 100"], ["Medium: 101 to 1000","Medium: 101 to 1000"], ["High: > 1000","High: > 1000"]]

    respond_to do |format|
      format.js
    end
  end

然后，在 app/views/spore_type_counts/new.js.erb

$('#samples').hide().after( '<%= j render("spore_type_counts/form") %>' );

到目前为止，一切都按预期进行，当我单击“添加孢子计数”时，选项卡将更改为如下所示:

这就是我遇到的问题发生的地方。

当我提交spore_type_counts/form时我进入create Controller 的操作是这样的:

  def create
    @spore_type_count = SporeTypeCount.new(spore_type_count_params)

    respond_to do |format|
      if @spore_type_count.save
        format.js { render 'tape_bulk_cocs/sporeCounts'}
      end
    end
  end

到达此处后，所有内容都会正确提交到数据库，但页面不会更改。我不知道如何重新渲染 tape_bulk_cocs/sporeCounts部分(第一张图片)。

本质上，一旦我提交了表单，我需要从spore_type_count_controller/new获取返回tape_bulk_coc_controller/show并更新我的对象，而不刷新页面。

我该怎么做？或者我是否需要重组我的应用程序以使其以不同的方式工作？

Answer 1

您需要使用部分内容更新 DOM，就像在 new.js.erb 模板中所做的那样。现在，您只是说“渲染此部分”，但页面不知道如何使用该内容更新自身，除非您通过 JavaScript 告诉它如何更新。

尝试创建一个 spore_type_counts/create.js.erb 文件，该文件将在运行 SporeTypeCounts#create 操作后执行。在该模板内，添加 JavaScript 代码，该代码将使用您从部分呈现的内容来更新您的页面。

例如，

// hide the previous content
$("#spore-count-form").remove();

// show the new content
$('#samples').html("<%= j render('tape_bulk_cocs/sporeCounts') %>");

需要注意的几点:

• 更新上面的选择器以适合您的应用。我通常使用 data-attributes 来标记我将使用 JavaScript 操作的内容(例如 data-ujs-target=spore-form)。这样，JS 交互就不会因为有人意外更改 ID 或 CSS 类而中断。

• 您可能需要更新标记才能使用 jQuery 进行修改。

• 如果 tape_bulk_cocs/sporeCounts 使用任何实例变量，请确保它们是在 SporeTypeCounts#create 操作中定义的，否则部分将无法渲染。 (注意:you really should avoid using instance variables within partials 因此)

希望有帮助!