導軌和引導酥料餅的破壞行動（讓我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）

回答

相關問題