Strukturierung von JS-Assets in Rails 3.1 (Styx)

    Der Asset-Mechanismus in 3.1 hat die Lebensdauer großer Projekte erheblich vereinfacht, für kleine Projekte jedoch etwas kompliziert. Bei Verwendung der eingebauten Generatoren erstellen die Schienen wie zuvor eine separate Datei für jeden Controller, erst jetzt wird der Inhalt dieser Dateien standardmäßig auf absolut allen Seiten angezeigt. Wenn dies im Fall von SCSS nur hilft, wenn die richtige Strukturierung auferlegt wird, was ist dann mit JS zu tun?

    Wenn das Projekt groß ist und Sie eine Art Client-Framework wie Backbone für massive JS verwenden - großartig! Es wird besser geladen und entscheidet, wo und wie es funktioniert. Aber was ist, wenn Sie nur eine kleine Menge Code für bestimmte Seiten verbinden müssen? Das heißt, nicht einmal Controller, sondern Aktionen. Und es ist wünschenswert, dass sich der Code nicht in Spaghetti verwandelt, wenn solche Stücke mehr als 5 werden. Der kleine Styx- Edelstein kann dabei helfen .

    Styx kann nicht nur bestimmten Code für eine bestimmte Aktion aufrufen, sondern auch Daten von Ruby darauf übertragen. Kochen:

    
    # Gemfile
    gem 'styx'
    # app/controllers/application_controller.rb или нужный вам controller
    class ApplicationController
      include Styx::Initializer
    end
    # app/views/application.html.erb
    <%= javascript_include_tag "application" %>
    <%= styx_initialize %>
    <%= csrf_meta_tags %>
    


    Wenn wir einen FoosController-Controller haben, den wir mit "Rails G Foos" erstellt haben, dann haben wir durch unsere Bemühungen nicht nur app / controller / foos_controller.rb, sondern auch app / assets / javascripts / foos.js.coffee. Letzteres sollte folgendermaßen aussehen:

    
    # Класс называется по имени контроллера в неймспейсе Styx.Initializers.
    @Styx.Initializers.Foos =
      initialize: ->
        console.log 'Этот метод будет вызван при попадании в любой action контроллера foos сразу после парсинга тега '
      index: (data) ->
        console.log 'Этот метод будет вызван при попадании в /foos/ сразу после парсинга тега '
      show: (data) -> $ ->
        console.log 'А вот таким образом (при использовании jQuery) можно вызвать метод после загрузки страницы /foos/... (см. jQuery.ready())'
    


    Beachten Sie, dass alle Methoden (mit Ausnahme der allgemeinen Initialisierung) den Datenparameter akzeptieren. Standardmäßig ist dies ein leeres Objekt {}, aber es kann sowohl direkt im Controller als auch in der Ansicht problemlos von der Rubinseite aus nachgefüllt werden:

    
    # app/controllers/foos_controller.rb
    class ApplicationController
      def index
        styx_initialize_with :foo => 'bar', :and => {:habrahabr => 'rockz!'}  
      end  
    end
    


    
    # app/views/foos/index.html.erb
    <%- styx_initialize_with :something => 'very important' %>
    


    Jetzt kommen wir in Daten:

    
    {"foo": "bar", "and": {"habrahabar": "rocks!"}, "something": "very important"}
    


    Das ist alles, was Sie brauchen, um unseren Code aufzurufen. Aufgrund der Tatsache, dass JS in einer einzigen Datei zusammengefasst und als Ganzes verbunden ist, können Sie Ihren wiederholten Code leicht in Klassen beschreiben (nämlich dank Coffee in Klassen) und sie mit Initialisierern auf den erforderlichen Seiten aufrufen. Und als netter Bonus - keine Dumps mehr von ".to_json" für das Übertragen von Daten an JS in Ihren Ansichten :).

    Jetzt auch beliebt: