escape_javascript 之后的砌体

Posted 2023-02-19

技术标签:

【中文标题】escape_javascript 之后的砌体【英文标题】：Masonry after escape_javascript 【发布时间】：2013-09-11 16:33:35 【问题描述】：

我正在使用 Masonry 和 Rails 应用程序来渲染一个充满图像的屏幕。我的问题是在某些时候我使用远程 AJAX 表单进行调用，该表单稍后会刷新 div。在那之后，调用 Masonry 就停止工作了，调用它就像没有定义 Masonry 一样。

渲染代码相当简单，div Masonry 应该可以工作：

<div id="pins">
  <%= render @pins %>
</div>

我正在渲染的部分只是显示 Rails 模型，它看起来像：

<div id="pin-<%= pin.id %>" class="box">...</div>

在第一页加载时加载 Masonry 的代码：

jQuery ->
    $('#pins').imagesLoaded ->
        $('#pins').masonry itemSelector: ".box", isAnimated: true

然后，在视图 javascript 中，我重新渲染 div，如下所示：

$("#pins").html("<%= escape_javascript render @pins %>");

$('#pins').imagesLoaded(function() 
    alert("Hey");
    return $('#pins').masonry(
          itemSelector: ".box",
          isAnimated: true
    );
);

刷新后，会显示“嘿”警报，这意味着事件被触发并被很好地捕获。但是，调用了 Masonry 并且似乎正在重新附加内容但没有对其进行排序。为了测试这一点，我还尝试使用链接手动触发 Masonry，并且在调用 escape_javascript 后它也停止工作。当然，如果我尝试在没有 escape_javascript 的情况下渲染部分内容，则不会刷新任何内容。

我需要一些方法来渲染部分而不转义 javascript，或者在 javascript 被转义后如何使 Masonry 可操作的说明。请注意，与上述重新声明时其他 JQuery 组件工作正常的环境相同。

提前致谢。

【问题讨论】：

【参考方案1】：

添加元素后尝试使用“附加”方法

http://masonry.desandro.com/methods.html#appended

【讨论】：

【参考方案2】：

只需触发重新加载元素，例如：

$(document).ajaxComplete -> $(element).masonry()

如果尝试在 $(element) 上捕获 ajaxComplete 将不起作用

【讨论】：