Question

所以我实际上正在关注铁路入门视频教程中的红宝石...... 课程的这一部分即将教给我一些coffeescript

所以计划是让这个灰色的容器跟我一样的链接和＃34;查看答案＆＃34;

我使用的代码如下。我也被告知，因为我使用turbolinks，我应该包括＆＃34;（文档）.on＆＃34;页面：load＆＃34;，ready＆＃34;线

＆＃34; home.coffee＆＃34;

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

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

然而，经过测试后。单击灰色容器，什么都不做。我错过了某种形式的脚本吗？早些时候，我在咖啡脚本上测试了Console.log（＆＃34; TEST＆＃34;），并且能够打印出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 =＆＃34;＆lt;％= question_path（q）％＆gt;＆＃34;进入媒体

<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函数返回其最后一个表达式的值（就像在Ruby中一样），因此当return false是函数的最后一行时，false可以只是function request($query){ $data = array(); $index = 0; if($r = mysqli_query(self::$conn, $query)){ while($row = @mysqli_fetch_array($r)){ $data[$index] = $row; $index++; } return array("request"=>$r, "rows"=>json_decode(json_encode($data), true)); } }。

Answer 2

看看你的咖啡因，有一些错误：

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属性，您可能需要验证是否正在触发您的点击处理程序。快速入侵的方法是在那里快速console.log调用，但您也可以使用调试器来创建断点（更强大）。我首先要确保：

$(".media")符合您的期望
点击

ready

$(this).data("target")会返回您期望的值

如果没有发生第2号，您可以开始查看page:load绑定;也许Turbolinks尚未加载，或者您没有使用当前版本？

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

无法让coffescript运行，将<div>类转换为链接

2 个答案: