更新的Rails使用遠程=真

Question

我有這樣的代碼在Rails視圖從JS查看「在我的控制器中。此方法將更新數據庫，並設置一個實例變量@newstate =「FAV」

在make_fav.js.erb我可以看到，這個實例變量被設置

<% puts "Newstate is #{@newstate}" %> 

在我index.html.erb

，我有

<td id='<%= "favourite-#{product.id}" %>' > 
    <% if current_user.products.exists?(product.id) %> 
     <i class="fa fa-star" %></i> 
    <% else %> 
     <i class="fa fa-star-o" %></i> 
    <% end %> 
</td> 

現在我應該如何（在make_fav.js.erb）更新ID的TD 「最愛 - ＃{} product.id」，以反映@newstate變量？

我曾嘗試之類的東西

<% @key = "#favourite-#{@product.id}" %> 
<% x = "<i class='fa fa-star' id='favourite-#{@product.id}></i>" %> 

$('<%= @key %>').html("<%= escape_javascript (x) %>"); 

但你可以看到，我在當它涉及到JavaScript中的損失......

基本上，我要更新的內容

<i class="fa fa-star" %></i> 

如果@newstate是 「我的最愛」，以及其他

<i class="fa fa-star-o" %></i> 

我覺得我很近，但會很感激任何幫助！

此外，如果有更好的/更「高尚的」做法，我想聽聽它。

Answer 1

您的推理與解決方案並不相距太遠。看起來您正在計算您想要查找的元素的id，但您想要更新該ID中的i元素。所以你的make_fav.js.erb的一個小改變可以做到這一點。嘗試更改爲：

(function() { 
    var id = "#favourite-<%= @product.id %> i"; 
    if ($(id).hasClass('fa-star-o')) { 
    $(id).addClass('fa-star').removeClass('fa-star-o'); 
    } else { 
    $(id).addClass('fa-star-o').removeClass('fa-star'); 
    } 
})(); 

在此方案中，我們首先定義你想找到（這是favourite-id內i和交換類（如果它是fa-star它去fa-star-o，副主席i的選擇反之亦然）。

注意，而不是在這種條件下使用$(id).hasClass('fa-star-o')，你應該使用數據的新狀態（我只是不知道它是怎麼會看起來像你的具體情況），但make_fav.js.erb可能看起來像：

(function() { 
    var id = "#favourite-<%= @product.id %> i"; 
    <% if current_user.products.exists?(product.id) %> 
    $(id).addClass('fa-star').removeClass('fa-star-o'); 
    <% else %> 
    $(id).addClass('fa-star-o').removeClass('fa-star'); 
    <% end %> 
})(); 

這將是首選方式，因爲您不依賴於UI的狀態，而是依賴於數據的狀態。