javascript - rails 5 : dynamic table ID access in Coffeescript

Question

在索引 View 中，我有一个表，我想在其中动态填充 ID。 到目前为止，我试过这个:

id="table_<%= @controller_name %>"

Controller 中的方法:

def get_controller_name
  @controller_name = self.class.name.split("::").last
end

然后我想访问我的 Coffeescript 中的特定表。我是这样做的:

$ ->
  myvar = '<%= raw @controller_name.to_json %>'
  myvarAsObj = JSON.parse(myvar)
  $('#' + 'table_' + myvarAsObj).DataTable

然而它似乎并没有起作用。 我在 Page Source 中看到我得到了这样的表 ID: id="table_MyController"

请问如何在 Coffeescript 中正确访问我的表 ID？谢谢!

更新

索引中的表:

<table data-controller-name="<%= @controller_name %>" cellpadding="0" cellspacing="0" 
border="0" class="table table-striped table-bordered table-hover" width="100%" 
data-source="<%= campaign_campaigns_index_path(format: :json) %>">

CoffeeScript :

$ ->
  $('table[data-controller-name]').each ->
    $(this).DataTable
    ajax: $('table[data-controller-name]').each ->
      $(this).data('source')

页面来源:

<table data-controller-name="CampaignsController" cellpadding="0" cellspacing="0" border="0"
  class="table table-striped table-bordered table-hover" width="100%"
  data-source="/en/campaigns.json">

Answer 1

它看起来像 <%= raw ...%>在您的 coffeescript 中按字面解释。通过 HTML 数据属性将任何数据从 Rails 传递到 Coffeescript，而不是尝试对其进行插值，我总是取得更大的成功。使用数据属性还可以减少 Rails 和 JavaScript 代码之间的耦合。

你可以这样做:

ApplicationController.rb

def get_controller_name
  @controller_name = self.class.name.split("::").last
end

CampaignsController.rb

def index
  # Render your data as JSON. Example data from the DataTables site:
  render json: {
      data: [
        [
          "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120"
        ],
        [
          "Garrett Winters", "Director", "Edinburgh", "8422", "2011/07/25", "$5,300"
        ]
      ]
    }
end

home.coffee

$ ->
  $('table[data-controller-name]').each ->
    el = $(this)

    el.DataTable {
      ajax: el.data('source')
    }

index.html.erb

<table data-controller-name="<%= controller.get_controller_name %>"
       data-source="<%= campaign_campaigns_index_path(format: 'json') %>">
   <thead>
     <tr>
         <th>Column 1</th>
         <th>Column 2</th>
     </tr>
   </thead>
   <tbody>
       <tr>
           <td>Row 1 Data 1</td>
           <td>Row 1 Data 2</td>
       </tr>
       <tr>
           <td>Row 2 Data 1</td>
           <td>Row 2 Data 2</td>
       </tr>
   </tbody>
</table>

coffeescript 将作用于任何具有 data-controller-name 的表属性。

---

更新为了完整，你可以parse ERB tags通过附加 .erb到 Coffeescript 文件名，例如:

home.coffee.erb

$ ->
  $('#table_<%= @controller_name %>').DataTable {
    ajax: el.data('source')
  }

但是，我仍然建议使用 HTML data-attributes上述方法的灵 active 和将 Coffee/Javascript 与 Rails 代码分离。