无法获取 coffescript 运行，将 <div> class 变成 link

Question

所以我实际上是在关注 ruby on rail 介绍视频教程... 这部分课程是要教我一些 coffeescript

所以计划是让这个灰色容器遵循与我的 "view answers"

相同的 link

我使用的代码如下。我还被告知，因为我使用的是 turbolinks，所以我应该包括“(document).on "page:load", ready”行

"home.coffee"

ready = ->
$(".media").on "click", -> 
     (document).location = $(this).data("target")
     return false

$(document).ready(ready)
$(document).on "page:load", ready

但是，经过测试后。单击灰色容器，什么也不做。我是否缺少某种脚本才能正常工作？早些时候我在咖啡脚本上测试了 Console.log("TEST")，它能够在 chrome 的检查中打印出来。

我页面的当前布局

<!DOCTYPE html>
<html>
<head>
  <title>PROJECT HU</title>
<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>


  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

  <%= csrf_meta_tags %>
</head>

<body>
    <%= render 'home/navbar' %>

    <%= yield %> <!-- yield is content of the html-->
    <%= render 'home/new_question_form' %>

</body>

</html>

索引页如下 根据我的教程，我不得不添加这个 data-target="<%= question_path(q) %>" 进入媒体

<div class = "well">
    <h1>WELCOME LA</h1>
</div>
<div class='container'>
<!--#loop this html as much as number of question in the database-->
    <div class="boxes">
        <% @questions.each do |q|%> 
            <div class="media" data-target="<%= question_path(q) %>">
                    <div class="media-left">
                    <a href="#">
                        <img class="media-object" src="<%= q.gravatar%>" alt="sampleImg">

                    </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading"><%= q.email%> asked : </h4>
                        <div class="time"><%= time_ago_in_words q.created_at%></div>
                        <%= q.body %>
                    </div>

                    <div>
                        <a href= "<%= question_path(q)%>" class="btn btn-success btn-xs">View Answers</a>
                    </div>
            </div>
        <%end%>
    </div>
    <% if @questions.empty? %>
        <div class="alert alert-info">Ooops.... There's no questions here.</div>
    <% end %>
</div>

Answer 1

如果这是您的真实缩进：

ready = ->
$(".media").on "click", -> 
     (document).location = $(this).data("target")
     return false

那么你的 ready 函数是空的。 JavaScript 的版本（或多或少）是这样的：

var ready = function() { };
$(".media").on("click", function() {
     (document).location = $(this).data("target")
     return false
});

您的缩进定义了 CoffeeScript 代码的块结构，因此您必须正确：

ready = ->
  $('.media').on 'click', -> 
    document.location = $(@).data('target')
    false

此外，CoffeeScript 函数 return 它们最后一个表达式的值（就像在 Ruby 中一样）所以当它是最后一行时 return false 可以只是 false函数的。

Answer 2

查看您的 coffeescript，有几处错误：

ready = ->
$(".media").on "click", -> 
     (document).location = $(this).data("target")
     return false

$(document).ready(ready)
$(document).on "page:load", ready

第 2 行应该缩进
不需要把document括在括号里；您是否试图将其包装在 jQuery 对象中？
在 CoffeeScript 中，您只需将 false 放在函数或闭包的最后一行，它就会被返回

假设您的缩进是正确的，并且 .media 有一个 data-target 属性，您可能想要验证您的点击处理程序是否被触发。 quick-hack 方法是在其中快速调用 console.log，但您也可以使用调试器创建断点（功能更强大）。我首先要确保：

$(".media") 符合您的预期
您的 ready 闭包在点击时被调用
$(this).data("target") returns 您期望的值

如果第 2 点没有发生，您可以开始查看 page:load 绑定；可能 Turbolinks 尚未加载，或者您使用的不是当前版本？

注意：您不想同时绑定到 ready 和 page:load，否则您将注册两个点击处理程序。在最新的 TurboLinks 中，page:load 将适当地处理页面加载和 TurboLinks 导航。

无法获取 coffescript 运行，将 <div> class 变成 link

Unable to get coffescript running, making a <div> class into a link

jquery

coffeescript

ruby-on-rails-3