1

我正在使用 jQuery 和 Ajax 将内容动态加载到我的页面中，并且我想将 Rails 链接附加到要添加的每个对象。我生成数据列表的代码是：

$.each(data.recipients, function(index, object){
    $("#recipient-list").append("<div id=\""+ object.id +"\" class=\"recipient-list-item "+ object.recipient_type +"\">" + object.email + "<br/> </div>");
});

我想要实现的是添加一个 link_to 来删除选定的项目。IE。<%= link_to "Remove", delete_mail_recipient_path(object.id), method: :delete, data: {confirm: "You sure?"} %>

是否可以使用 jQuery 将此代码添加到页面中，还是我需要使用 html 来代替？我已经看到在几个地方使用了 escape_javascript，但据我所知，它是在js.erb文件中使用的？

任何帮助将不胜感激。

4

2 回答 2

2

你的预感是正确的:)

如果您从控制器（而不是资产）提供 js 文件，那么您应该可以访问所有 Rails 视图助手（link_to 等）。显然附加.erb到文件名，因此渲染调用知道首先用 erb 解析它。

所以例如

$.each(data.recipients, function(index, object){
   $("#recipient-list").append("<%= link_to "Remove", delete_mail_recipient_path(object.id), method: :delete, data: {confirm: "You sure?"} %>");
});

正如您所说，您可能需要将评估包装在rawor中escape_javascript。

但除此之外，我建议您将 JS 保留在您的资产中。如果跟踪所有 URL 很痛苦，可以将它们保存在与 url_helpers （即 mail_recipient_path ）名称相似的变量中并重用它们。

PS Rails 添加的数据属性是：

data-method="delete" data-confirm="Are you sure?"

根据文档，ajax链接的链接用法是：

link_to("Destroy", "http://www.example.com", :method => :delete, :confirm => "Are you sure?")
# => <a href='http://www.example.com' rel="nofollow" data-method="delete" data-confirm="Are you sure?">Destroy</a>

因此，通过使用该示例，您可以更改 url 以反映您要删除的对象。但是，是的，仍然需要让您的 URL 助手与您的 JS 保持同步。

也许将它们包装在如下函数中：

var mail_recipient_path;

mail_recipient_path = function(id) {
  return '/mail_recipients/' + id;
};

像使用 Rails 中的 URL 助手一样使用它。

高温高压

于 2012-11-30T12:25:02.833 回答
1

所以我使用 jQuery 解决了这个问题：这是我在 jquery 端的删除代码：

// deletes a mail recipient
function delete_recipient(element){
    target = element.attr("target");
    var confirm_delete = confirm("Are you sure you want to remove this recipient?")
    if (confirm_delete){
        $.ajax({
            url: '/delete_mail_recipient',
            type: 'delete',
            dataType: 'json',
            data: {
                id: target
            },
            dataType: 'json',
            success: function(data){
                if (data.result){
                    console.log(target);
                    $("#"+target).remove();
                }else{
                    alert("Sorry something went wrong when trying to delete that recipient.");
                }
            }
        });
    }
}

    // saves the configuration of the mails recipients
    $('#save-config').click(function(){
        var form = $('form#mail-form');
        var valuesToSubmit = $('form#mail-form').serialize();
        console.log(valuesToSubmit);            // 
        save_mail_configuration(valuesToSubmit, form)
    });

这是我为页面上我希望能够删除的动态对象设置 ID 的代码：

$.each(data.recipients, function(index, object){
    $("#recipient-list").append("<div id=\""+ object.id + "\" class=\"recipient-list-item "+ object.recipient_type +"\">" + object.email + "<a class=\"remove-recipient\" target=\""+ object.id + "\" > Remove</a><br/> </div>");
});
于 2012-11-30T17:02:52.747 回答