Rails 3咖啡脚本控制器协会？答案

【问题标题】：Rails 3 coffeescript controller association?Rails 3咖啡脚本控制器协会？
【发布时间】：2013-01-09 17:59:02
【问题描述】：

好吧，我是 JS / JQuery / Coffeescript 菜鸟。这对某人来说可能很容易。

在成功实现了 RBate 的嵌套表单模型 railscast 之后，我试图在一个更简单的模型中重现这一点：章节有很多县。

我有一个带有以下代码的chapters.js.coffee 文件：

jQuery ->
  $('form').on 'click', '.remove_fields', (event) ->
    $(this).prev('#destroy').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()

此代码在其他模型中运行良好。但这里没有。

_chapters_form.html.erb:

<div class="row span12">    
<%= form_for(@chapter) do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    <div class="span2"><strong>Chapter name:</strong></div>
    <div class="span6"><%= f.text_field :name %></div>
    <div class="span2"><strong>Chapter Number:</strong></div>
    <%= f.number_field :chapter_num, class: "span2" %>
</div>
<div class="row span12">
<div class="span12">
    <%= f.fields_for :counties do |builder| %>
        <%= render 'county_fields', f: builder %>
    <% end %>
</div>
    <% if f.object.new_record? then link = 'Add the Chapter' else link = 'Update Chapter' end %>
      <%= f.submit "#{link}", class: "btn btn-large btn-primary" %>
      <%= link_to "Cancel", chapters_path, class: "btn btn-large btn-primary" %>
    <% end %>
</div>

和：

_county_fields.html.erb:

<fieldset>
<div class="well span12">
    <div class="row span12">
        <div class="span3">County Number: <br /><i>(6-digit FIPS code)</i></div>
        <div class="span2"><%= f.number_field :county_num %></div>
        <div class="span2">County Name:</div>
        <div class="span5"><%= f.text_field :name %></div>
    </div>
    <div class="row span12"><hr></div>
    <div class="row span12">
        <div class="span6">Move to new Chapter:</div>
        <div class="span6"><%= select(:county, :chapter_id, Chapter.all.collect {|c| [c.name, c.id]}) %></div>
    </div>
    <div class="row span12">
        <div class="pull-right">
            <%= f.hidden_field :_destroy, id: "destroy" %>
            <%= link_to "remove county", "#", class: "remove_fields" %>
        </div>
    </div>
</div>
</fieldset>

JS 中没有错误。再说一次，菜鸟说话，但似乎没有调用 JS。单击<%= link_to "remove county", "#", class: "remove_fields" %> 只需将# 添加到URI。

我做错了什么？

根据要求，HTML in a fiddle 也不起作用。

【问题讨论】：

仅供参考，Coffeescript 注释说文件应该命名为与控制器相关联。 chapters_controller.rb 存在。视图都工作正常，表单提交正常。没问题。
这些部分是在同一个控制器下，还是在不同的控制器下？（工作和非工作形式）
部分都在app/views/chapters文件夹中。它们没有通过控制器呈现（如 AJAX 调用）。它们在 HTML 中呈现，如图所示。部分都在正确查看和提交。单击链接时不会执行任何JS。

标签： javascript jquery ruby-on-rails-3 coffeescript

【解决方案1】：

您的 HTML 已损坏。在表单元素之前打开一个 div，然后在关闭表单之前关闭它。如果将表单元素向上移动到容器 div 内部，it works。

<body>
  <div class="container-fluid">
    <form accept-charset="UTF-8" action="/chapters/7" class="edit_chapter" id="edit_chapter_7" method="post">
      <div class="row-fluid">
...
     </div>
    </form>
  </div>
</body>

您应该更加小心 HTML 的缩进，以帮助避免这种简单的错误。代码格式很重要。

【讨论】：

我赌 5,000 美元我的 div 都是正确的。事实上，当我第一次看到你的回复时，我说了一些关于你的坏话。然后我回去了，果然，我留下了一个悬挂的
标签。我收回一切，还你“互联网大师”的称号。

【解决方案2】：

它们出现的页面 - 无论它们如何呈现 - 必须是 chapters_controller 的操作，chapters.js.coffee 才能被包含在内。我敢打赌，脚本根本不包括在内，因为代码看起来不错。查看您在使用此代码时遇到问题的页面：

jQuery ->
  console.log "included chapters.js.coffee"
  $('form').on 'click', '.remove_fields', (event) ->
    console.log "clicked .remove_fields"
    $(this).prev('#destroy').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()

另外，在您的问题中发布呈现的 HTML

【讨论】：

好的，再次，这里是菜鸟。当您说“它们出现的页面”时，“它们”是指部分吗？你的意思是从控制器而不是视图渲染部分？当我获取 HTML 时，头部包括：来自资产管道的 <script src="/assets/chapters.js?body=1" type="text/javascript"></script>，所以我觉得该功能应该是可访问的。
我正在使用 Bootstrap，所以有很多 div 让 HTML 变得丑陋。我添加了一个指向小提琴的链接，我还粘贴了从 Chrome 检查器中提取的渲染 JS。
@Vox 帮助我找到了解决方案。我确定你走在正确的轨道上，事实上，我从你的 console.log 方法中学到了很多东西，所以我投票赞成。谢谢！