Rails 4 - 呈现部分后运行代码的事件答案

【问题标题】：Rails 4 - event to run code after a partial is renderedRails 4 - 呈现部分后运行代码的事件
【发布时间】：2016-04-27 02:35:23
【问题描述】：

我有一个通过控制器操作使用 ajax 调用的 js.erb 文件。 js.erb 文件呈现部分内容。部分内部是基于模型生成的数据属性。我需要一种方法来仅在部分渲染后运行代码，因为代码正在使用数据属性中的信息。

items_controller.rb

  def remove_tag
    @item = Item.find_by_id(params[:id])
    //code to remove tag from item
    @item.save
    respond_to do |format|
      format.js
      @item.reload
    end
  end

remove_tag.js.erb

$("#taglist").html('<%= escape_javascript(render partial: "items/tag_list", locals: {item: @item}) %>');
//the code below needs to be run after the above partial is rendered
$('#add-tag').rules("add", {
  tagUniqueness: $('#taglist').data('tag-list').split(', ')
});

_tag_list.html.erb

<div id="taglist" data-tag-list="<%= item.all_tags_list %>">
  //more html
</div>

现在的方式是，.rules 方法使用部分更新之前存在的 html 数据。

【问题讨论】：

您的视图应该只是呈现模型。如果您的视图正在改变模型，那么您正在做一些非常错误的事情，因为严重违反了 MVC。
我的视图没有改变模型，模型是通过 remove_tag 动作改变的。
tagUniqueness: "<%= @item.tags.pluck(:name).join(', ') %>" - 似乎是一个更直接的解决方案，因为您可以从 rails 而不是 DOM 获取它。
@max 我正在尝试使用您的建议获得正确的输出。我需要在@item 上使用的方法是.all_tags_list。（来自acts-as-taggable-on）我正在使用remove_tag.js.erb 文件中的console.log 进行检查。我试过console.log ("<%= @badge.all_tags_list %>")，它返回tag1, tag2, tag3。我怎样才能使它成为一个字符串数组？我尝试附加 .split(', ') 但它给了我[[&quot;tag1&quot;, &quot;tag2&quot;, &quot;tag3&quot;]]
对不起，我看错了你的 JS，以为你想要一个字符串。您可以使用.to_json 将 Ruby 数组转换为 javascript（因为有效的 JSON 是有效的 javascript）。

标签： javascript jquery ruby-on-rails ajax partials

【解决方案1】：

要将哈希或数组从 Ruby 转换为 javascript，您可以使用 .to_json，因为 JSON 基本上是 javascript 的子集。

$('#add-tag').rules("add", {
  tagUniqueness: <%= js @badge.all_tags_list.to_json %>
});

【讨论】：

我使用的是raw 而不是js。一个比另一个更好吗？
在这种情况下，它可能并没有真正的区别——我不认为你可以通过创建一个真正有创意的标签名称来进行 XSS 攻击，因为编码为 JSON 会逃避它。 raw 可能更快，因为它不使用 gsub 或实际上对字符串做任何事情，除了将其标记为安全。

【解决方案2】：

这种类型的功能适用于 javascript/jquery 中的 callbacks...

当前效果100%完成后执行回调函数。

我们在 ajax 加载后使用回调来执行函数（必须保持异步）。如果你能让它们发挥作用，它们就会非常有效。

有一个great reference here：

$("#taglist").html('<%= escape_javascript(render partial: "items/tag_list", locals: {item: @item}) %>').promise().done(function(){
    $('#add-tag').rules("add", {
       tagUniqueness: <%= js @badge.all_tags_list.to_json %>
    });
});

【讨论】：