Question

您好我试图在rails 4应用程序中实现倒数计时器。我从一个类似的问题http://keith-wood.name/countdown.html中找到了keith woods插件。问题是让一个简单的倒数计时器工作，因为我无法在rails 4中找到任何简单的例子。我想要做的是在比赛创建一个计时器从10天开始添加一个倒数计时器，看起来像=天：小时：分钟：秒

我下载倒计时包并将* = jquery.countdown.css添加到app / assets / stylesheets / application.css

我将// = jquery.countdown.js添加到我的app / assets / javasript / application.js，我在app / views / layout文件夹中添加了jquery.countdown css和js文件。我的宝石文件中还有宝石'jquery-rails'宝石

我将我的功能放在我的competition.js.coffee文件中我有

$(function () { 
$('#until2d').countdown({until: '+2d'});
});

并在我的竞争视图中调用它，如

<div id="until2d"></div>

我的app / views / competition show.html ....我希望计时器出现

<p id="notice"><%= notice %></p>
<p>
  <strong>Prize:</strong>
  <%= @competition.prize %>
</p>
<p>
  <strong>Date:</strong>
  <%= @competition.Date %>
</p>
<%= link_to 'Edit', edit_competition_path(@competition) %> |
<%= link_to 'Back', competitions_path %>
<h1>Timer</h1>
<div id="until2d"></div>

我的views / layouts / application.html.erb文件，其中我放置了适当的标签

<!DOCTYPE html>
<html>
<head>
  <title>Timer</title>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css"> 
<script type="text/javascript" src="js/jquery.plugin.js"></script> 
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<%= yield %>

</body>
</html>

我的app / assets / javascript / application.js文件看起来像

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= jquery.countdown.js

如果有人能告诉我，如果我是在正确的轨道或指向我一个简单的教程我会很感激

Answer 1

将您的application.js文件更新为：

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.countdown.js 
//= require_tree .

你在jquery.countdown.js前面缺少require，你可能需要它来到你的代码之前。

如果这是问题所在，您可能应该在Javascript控制台中看到类似“[对象]没有方法倒计时”的内容或者表明问题的内容。此外，如果您查看您的javascript源列表（在浏览器开发人员工具或源页面中），您应该看到列出了jquery.countdown.js（假设您在开发模式下运行 - 因为在开发模式下，资产管道服务单独编写所有javascript，以便调试这些问题。）

更新

在查看完整的代码库之后，它是错误放置的javascript文件和一些糟糕的javascript（混合了咖啡脚本评论的javascript）的组合。上面的修复可能是基本修复，但其他项目将很难在这里分享。对于任何感兴趣的人，有一个拉动请求可以移动一些文件并进行一些清理以解决问题。 https://github.com/Bob-sheehy/timer/pull/1

Answer 2

你确定这不是Turbolinks的问题吗？

尝试初始化代码：

jQuery(document).on("ready page:load", function() {
  $(function () { 
    $('#until2d').countdown({until: '+2d'});
  });
});

由于Turbolinks不会对get请求进行完整的页面更改，因此document.ready事件永远不会触发。

Rails 4倒数计时器

2 个答案:

更新