Bonjour

Je travaille actuellement sous ruby on rails et essaye d'installer dans ma view un compte à rebours (je précise ruby on rails car c'est peut être la cause de mon problème... A voir)

J'ai opté pour the final countdown : http://hilios.github.io/jQuery.countdown/ 

J'adore l'exemple qui se trouve en haut à droite de cette page mais malheureusement celui ci n'est pas proposé dans la page exemple du site...

Fourbe que je suis, je me suis donc tourné vers le code source de la page que voici

<div class="pure-u-1-2">
  <div class="main-example">
  <p>
    Next year begins in:
  </p>
  <div class="countdown-container" id="main-example"></div>
</div>
<script type="text/template" id="main-example-template">
<div class="time <%= label %>">
  <span class="count curr top"><%= curr %></span>
  <span class="count next top"><%= next %></span>
  <span class="count next bottom"><%= next %></span>
  <span class="count curr bottom"><%= curr %></span>
  <span class="label"><%= label.length < 6 ? label : label.substr(0, 3)  %></span>
</div>
</script>
<script type="text/javascript">
  $(window).on('load', function() {
    var labels = ['weeks', 'days', 'hours', 'minutes', 'seconds'],
      nextYear = (new Date().getFullYear() + 1) + '/01/01',
      template = _.template($('#main-example-template').html()),
      currDate = '00:00:00:00:00',
      nextDate = '00:00:00:00:00',
      parser = /([0-9]{2})/gi,
      $example = $('#main-example');
    // Parse countdown string to an object
    function strfobj(str) {
      var parsed = str.match(parser),
        obj = {};
      labels.forEach(function(label, i) {
        obj[label] = parsed[i]
      });
      return obj;
    }
    // Return the time components that diffs
    function diff(obj1, obj2) {
      var diff = [];
      labels.forEach(function(key) {
        if (obj1[key] !== obj2[key]) {
          diff.push(key);
        }
      });
      return diff;
    }
    // Build the layout
    var initData = strfobj(currDate);
    labels.forEach(function(label, i) {
      $example.append(template({
        curr: initData[label],
        next: initData[label],
        label: label
      }));
    });
    // Starts the countdown
    $example.countdown(nextYear, function(event) {
      var newDate = event.strftime('%w:%d:%H:%M:%S'),
        data;
      if (newDate !== nextDate) {
        currDate = nextDate;
        nextDate = newDate;
        // Setup the data
        data = {
          'curr': strfobj(currDate),
          'next': strfobj(nextDate)
        };
        // Apply the new values to each node that changed
        diff(data.curr, data.next).forEach(function(label) {
          var selector = '.%s'.replace(/%s/, label),
              $node = $example.find(selector);
          // Update the node
          $node.removeClass('flip');
          $node.find('.curr').text(data.curr[label]);
          $node.find('.next').text(data.next[label]);
          // Wait for a repaint to then flip
          _.delay(function($node) {
            $node.addClass('flip');
          }, 50, $node);
        });
      }
    });
  });
</script>
</div>

Ainsi que la partie css que je ne mets pas ici par inutilité.

Mais ce code ne fonctionne pas... ROR me renvoit une erreur à cause du contenu du script "text/template" (que je n'avais jamais vu jusqu'ici...)

Mais palettes s'affichent bien quand je retire les <%= et %> (très proche du ruby d'ailleur...) mais aucun nombre ne s'y inscrit...

Une idée les pros du JS ? (moi je suis un noob...)

Merci pour ta réponse

C'est un fichier qui ne se trouve pas dans le projet... ils doivent le garder pour eux

Mais c'est pas grave j'ai réussi avec http://flipclockjs.com/ 

Je le recommande vraiment pour ceux qui cherche un countdown avec anim sympa. Très facile à installer et à paramétrer !!