Ärger bewegen Kaffee Skript-Schnipsel in eine eigene Klasse innerhalb Schienen

Question

ich die Aufgabe gegeben wurde

format = (icon) -> 
    originalOption = icon.element 
    '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text 

$(document).ready -> 
    $('.select2-fountawesome-icon').select2 
    width: '100%' 
    formatResult: format 

Es ist eine Rails-Anwendung diese Kaffee-Script-Code in eine Klasse zu bewegt und arbeitet in application.js.coffee.

Dies ist, was ich in scenario-page.js.coffee

class @ScenarioPage 
    constructor: -> 
    @format() 
    @enabledSelect2() 

    format: (icon) -> 
    originalOption = icon.element 
    '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text 

    enabledSelect2:() -> 
    $('.select2-fountawesome-icon').select2 
     width: '100%' 
     formatResult: format 

bisher haben habe ich eine Klasse mit einem Konstruktor, der die Instanz-Methoden/Eigenschaften init. Ich ließ document.ready fallen, weil Kaffee-Skript nach ihm sowieso lädt. Die Funktionen in der Klasse sollten korrekt definiert sein. Ich habe versucht, coffeescript in js zu konvertieren und es scheint richtig. Ich bin mir nicht sicher, was mit meiner neuen Klasse nicht stimmt. Das erste Snippet funktioniert.

Answer 1

Ich sehe zwei Fehler im Code:

class @ScenarioPage #<---- @ shouldn't be here 
    constructor: -> 
    @format() #<---- the icon param is missing, which will cause an error below 
    @enabledSelect2() 

    format: (icon) -> 
    originalOption = icon.element 
    '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text 

    enabledSelect2:() -> 
    $('.select2-fountawesome-icon').select2 
     width: '100%' 
     formatResult: format 

Und wenn ich etwas hinzufügen können, das ist, wie ich tun würde:

class ScenarioPage 
    constructor: -> 

    format: (icon) -> 
    originalOption = icon.element 
    '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text 

    enabledSelect2:() -> 
    $('.select2-fountawesome-icon').select2 
     width: '100%' 
     formatResult: format 

$(document).ready -> 
    scenario = new ScenarioPage() 
    scenario.enabledSelect2() 

Jetzt würden Sie nur das Format-Funktion aufrufen müssen, wenn Sie wollen. Zögern Sie nicht, mich zu fragen, wenn Ihnen etwas unklar erscheint.

Grüße,