2017-04-25 2 views
2

ist ein Beispiel dafür, was Im Versuch zu erreichenIst es sicher, eval zu verwenden, um die Coffeescript-Klasse dynamisch aufzurufen? Diese

HTML

<div data-js-class="Header"></div>

Coffee

class Header 
    constructor: (@root) -> 
    # Header related code here 


$('[data-js-class]').each(-> 
    unless $(this).attr('data-js-loaded') == 'true' 
    partial_class = eval($(this).attr('data-js-class')) 
    if typeof partial_class != "undefined" 
     new partial_class($(this)) 
     $(this).attr('data-js-loaded', 'true') 
) 

Ich bin nicht sicher, ob es ganz sicher ist, eval() zu verwenden, hier oder wenn es ein besserer Weg, es zu tun? Ich habe versucht, window[$(this).attr('data-js-class')] zu verwenden, aber es schien nicht zu funktionieren, vielleicht aufgrund der Art, wie Coffeescript Verschlüsse verwendet.

Antwort

3

Sie brauchen nicht eval, Ihr window[...] Ansatz ist auf dem richtigen Weg. Ihr Problem mit window als Namespace ist, dass dies:

class Header 
    constructor: (@root) -> 
    # Header related code here 

wird (mehr oder weniger) diese:

(function() { 
    var Header = ... 
}).call(this); 

, so dass Sie mit einem lokalen Header Variable stecken, anstatt einen globalen window.Header. Sie könnten Header global machen:

class @Header 
    #---^ 
    constructor: (@root) -> 
    # Header related code here 

und dann window[$(this).attr('data-js-class')] Trick funktioniert.

Oder besser (IMO), einen eigenen Namensraum für diese Klassen erstellen:

dynamics = { } 
class dynamics.Header 
    #... 
class dynamics.Footer 
    #... 

und dann können Sie new dynamics[$(@).data('js-class')] und so sagen. Wenn Sie Ihren eigenen Namespace verwenden, vermeiden Sie Globals und beschränken Sie auf eine kleine Menge speziell gelöschter Klassen.

Verwandte Themen