javascript - 如何点击编辑列表项？使用 AJAX、jQuery、Rails4

Question

目前，我可以通过单击“编辑”链接来编辑列表项。

但是，我希望能够仅单击列表项即可对其进行编辑。

这是我的 _item.html.erb 部分。一个项目有很多项，这就是我使用 id="<%= dom_id(item) 的原因:

<li class="klikkaa" id="<%= dom_id(item) %>">
    <%= item.description %>
    <%= link_to 'Edit', edit_project_item_path(item.project, item), remote: true %>
</li>  

编辑.js.erb:

$('#<%= dom_id(@item)%>').html("<%= j (render 'editform') %>");

我尝试在 asset/javascripts/item.js 中执行以下操作:

 $(document).ready(function(){
       $('.klikkaa').click(function(){
          $('#<%= dom_id(@item)%>').html("<%= j (render 'editform') %>");
       });
 });

但是，我在控制台上收到错误:

"Uncaught Error: Syntax error, unrecognized expression: #<%= dom_id(@item)%>"

如何在单击列表项本身而不是单击“编辑”链接时编辑列表项？

Answer 1

如果您想在 JS 中使用 Rails 中的变量和值，您应该将 js 文件的名称更改为 item.js.erb。

来自 Rails guide 的示例其中展示了如何使用 Rails 助手 (asset_path)

If you add an erb extension to a JavaScript asset, making it something such as application.js.erb, you can then use the asset_path helper in your JavaScript code:

$('#logo').attr({ src: "<%= asset_path('logo.png') %>" });