导轨和引导酥料饼的破坏行动（让我DRY）

我有一个部分_table_row这部分持有我为@admin_products.all导轨和引导酥料饼的破坏行动（让我DRY）

输出HTML在这部分我有一个柔软的删除按钮，其启动Twitter的引导酥料饼，这个弹出式窗口具有用于数据库记录的硬删除按钮。

为了让按钮进入弹出窗口，我已经在部分_table_row中包含了HTML内容，你可以想象通过我的数据库中的记录数重复HTML。

我想要实现的是将弹出窗口的HTML保存在index.html.erb中，并使用正确的ID动态添加销毁按钮到弹出窗口中。这是我遇到困难的地方。

我试着使用

$('.deleteButton').popover({ 
    html: true, 
    content: $('#popoverDestroy').html() + <%= link_to 'Delete', admin_product, method: :delete, class: 'btn btn-danger destroyButton', remote: true %>, 
    placement: 'left' 
});

但你可以理解，因为它不知道什么admin_product是，你会如何它正确关联会失败？

来源

2015-06-20 Xavier Akram

你把'$（'。deleteButton'）。popover（{...}）'放在哪里？在你的'assets/javascripts'中？ – AbM

@AbM yes在'assets/javascripts' dir –

添加要作为软删除按钮数据属性的HTML，然后在javascript再次拉出来：

在部分：

<button class='deleteButton' data-delete-button='<%= link_to 'Delete', admin_product, method: :delete, class: 'btn btn-danger destroyButton', remote: true %>'></button>

然后在JavaScript：

$('.deleteButton').each(function() { 
    var softButton = $(this); 
    softButton.popover({ 
    html: true, 
    content: $('#popoverDestroy').html() + softButton.data('delete-button'), 
    placement: 'left' 
    }); 
});

来源

2015-06-20 12:25:06

.data（'delete-button'）中缺少撇号，除此之外基本解决了我的问题。谢谢 –

在数据属性中使用整个链接元素的整个想法让我畏惧...... – max

@XavierAkram谢谢！现在修复。 –

您可以将产品ID作为html属性传递。在你_table_row.html.erb：

<a class='deleteButton' data-productId='<%= admin_product.id %>'>Soft Delete</a>

，然后在JavaScript中，你可以用this参考访问点击按钮，如果你传递一个函数来content(reference)：

$('.deleteButton').popover({ 
     html: true, 
     content: function(){ 
      return $('#popoverDestroy').html() + "<a href='/your-url/'" + this.data('productId') + "data-remote='true' data-method='delete'>Destroy</a>" 
     }, 
      placement: 'left' 
     });

来源

2015-06-20 12:26:37 AbM

由于您在脚本中对网址进行了硬编码，因此这并不好。最好使用rails路由帮助器而不是传递id。 – max

感谢您的建议，但是对网址进行硬编码并不是我之前的操作。 –

而是打破最佳实践并把你的javascript内联你实际上可以有“软”链接实际上有正确的URL。

您可以通过让您的“软”链接实际指向删除网址并设置一个事件侦听器来取消点击并打开弹出窗口。

$(document).on('click', '.deleteButton', function(){ 
    var link = $(this); 
    var content = $('#popoverDestroy').clone() 
    .append(link.clone().removeClass('.deleteButton')) 

    link.popover({ 
    html: true, 
    content: content.html() 
    }); 

    return false; 
});

这是渐进增强的想法更内嵌因为你把一个普通的HTML链接元素，并添加行为。

来源

2015-06-20 12:36:55 max

感谢您的建议 –

导轨和引导酥料饼的破坏行动（让我DRY）

回答

相关问题