自定义jQuery倒计时Ruby on Rails

Question

我希望自定义jQuery Countdown插件的CSS和Javascript。我正在将此Gem用于资产管道。 现在我已经包含在application.js

//= require jquery
//= require jquery.countdown
//= require bootstrap
//= require jquery_ujs
//= require tinymce-jquery
//= require jquery.turbolinks
//= require turbolinks
//= require masonry/jquery.masonry
//= require_tree .

application.css

 *= require_tree .
 *= require 'masonry/transitions'
 *= require jquery.countdown
 *= require_self
 */

我的问题是，在我的rails应用程序中将js和css文件包括在哪里，以及一旦我自定义了其中的一部分，如何在视图中调用它们？

Answer 1

这是解决问题的一种方法。

创建一个新的coffeescript文件app/assets/javascripts/timers.js.coffee ，其中包含：

Timers =
  init: ->
    @initCountdownUntil()
    @initCountdownSince()

  initCountdownUntil: ->
    $('div[data-countdown-until]').each (index, element) ->
      $element = $(element)
      date = new Date($element.data('countdown-until'))
      $element.countdown(until: date)

  initCountdownSince: ->
    $('div[data-countdown-since]').each (index, element) ->
      $element = $(element)
      date = new Date($element.data('countdown-since'))
      $element.countdown(since: date)

window.Timers = Timers

无论您在何处初始化其他javascript，都应添加：

Timers.init()

要将计时器添加到任何视图，只需添加具有data-countdown-until或data-countdown-since属性的div：

<div data-countdown-until="<%= 10.days.from_now %>"></div>

调用Timers.init() ，它将查找具有data-countdown-until或data-countdown-since属性的所有div，解析时间（时间可以采用标准ActiveRecord输出格式，因此@record.created_at可以正常工作），并在div上附加一个倒数计时器。

Answer 2

因此，您想通过使用覆盖创建一个新文件并确保将其加载到jquery.countdown.css文件之后（例如：jquery.countdown-customization.css）来自定义一些CSS，因此您的application.css将看起来类似于：

*= require_tree .
*= require 'masonry/transitions'
*= require jquery.countdown
*= require jquery.countdown-customization
*= require_self
*/

在JS中，您将使用所需的所有选项，使用所选的类（例如：“ countdown”）初始化所有元素。 现在的问题是：如何从视图中获取选项值？，一种选择是通过html数据属性将其传递，如下所示：

<div class="countdown" data-until="<%= my_object.due_date %>" data-format="dHM"></div>

现在回到JavaScript，初始化您的元素的代码：

$(document).ready(function(){
  $('.countdown').each(function(){
    $(this).countdown({until: new Date($(this).data('until')), format: $(this).data('format')});
  });
});

就是这样！