Migrieren Sie Javascript in CoffeeScript und es funktioniert beim Laden der Seite

Question

Ich versuche, ein Javascript für die Klasse eines Feldes zu laden. Hier ist meine Ansicht:

<%= form_for @game do |f| %> 
    <div class="row"> 
    <div class="col-lg-4 col-md-6"> 
     <div class="form-group"> 
     <%= f.label :time %> 
     <%= f.text_field :time, class: 'form-control form-datetime', readonly: true %> 
     </div> 
    </div> 
    </div> 
<%= f.submit(class: 'btn btn-success')%> 
<% end %> 

<script> 
    $(".form-datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'}) 
</script> 

Ich kann nur das Javascript auf Seite aktualisieren zu arbeiten. Beim ersten Ladevorgang gibt die Seitenkonsole an:

Auf Seite neu laden funktioniert es gut.

Ich habe versucht, wie das Dokument bereit Handler zu verwenden, so, ohne Glück:

<script> 
    $(document).ready(function() { 
    (".form-datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'}); 
    }); 
</script> 

Ich habe TurboLinks aktiviert, so habe ich versucht, dies ohne Glück How TurboLinks Works:

$(document).on("page:change", function() { 
    $(".form-datetime").datetimepicker({format: 'MM d, yyyy hh:iia'}); 
}); 

Ich würde auch mag dieses <script> Tag aus der Ansicht entfernen und es in die CoffeeScript-Datei platzieren. Was muss ich in die CoffeeScript-Datei schreiben, um diese Javascript-Funktion beim Laden der ersten Seite zu laden?

Answer 1

Das Coffeescript ist:

$(document).ready -> $(".form-datetime").datetimepicker format: 'yyyy-mm-dd hh:ii' 

Answer 2

In Ihrer Coffee Datei verwendet diese die loadDatePicker Funktion zu erstellen:

loadDatePicker -> 
    $(".form-datetime").datetimepicker format: 'MM d, yyyy hh:iia' 

Dies wird die Funktion verfügbar für den Einsatz von der Seite machen.

In Ihrer Seite HTML, dieses Skript verwenden, um die Datepicker auf bestimmte Ereignisse zu laden:

<script type="text/javascript"> 
    jQuery(document).ready(loadDatePicker); 

    // TurboLinks 5 events (only register if using TurboLinks 5 
    jQuery(document).on('turbolinks:load', loadDatePicker); 

    // TurboLinks Classic events (only register if using TurboLinks Classic 
    // jQuery(document).on('page:load', loadDatePicker); 
    // jQuery(document).on('page:change', loadDatePicker); 
    // jQuery(document).on('page:restore', loadDatePicker); 
</script> 

Diese Ereignisse führen die loadDatePicker Methode unter verschiedenen turbolinks Seite zu laden/Update-Szenarien aufgerufen werden. Abhängig von den Anforderungen Ihrer Anwendung können Sie die Unterstützung für andere TurboLinks-Ereignisse hinzufügen. Die vollständige Liste der Veranstaltungen finden Sie auf den Seiten TurboLinks Full List of Events oder TurboLinks Classic Events.