snabberb

Snabberb

Snabberb ist ein einfaches Ruby View -Framework, das auf Opal und Snabbdom basiert.

Sie können reaktive Ansichten in einfacher Ruby schreiben, die zu effizientem JavaScript zusammenhängen.

Inline -Beispiel

 require 'opal'
require 'snabberb'

class TextBox < Snabberb :: Component
  needs :text
  needs :selected , default : false , store : true

  def render
    onclick = lambda do
      store ( :selected , ! @selected )
    end

    style = {
      cursor : 'pointer' ,
      border : 'solid 1px rgba(0,0,0,0.2)' ,
    }

    style [ 'background-color' ] = 'lightblue' if @selected

    h ( :div , { style : style , on : { click : onclick } } , [
      h ( :div , @text )
    ] )
  end
end


# Assuming you have a DOM element with ID=app
TextBox . attach ( 'app' , text : 'hello world' )

# Or you can get the HTML string for isomorphic applications
TextBox . html ( text : 'hello world' ) 

Beispiele

Rack App

Roda -App mit HTML -Vorrangern

18xx Brettspiel Engine

Verwendung

Erstellen von DOM -Elementen mit H

Unterklasse Snabberb :: Komponente und überschreiben #Render, um Divs mit #H zu erstellen.

Render sollte nur ein Stammelement zurückgeben.

#h nimmt entweder ein DOM -Symbol (: div,: span ,: a, ...) oder einen anderen Snabberb :: Komponentenklasse.

...
class DomExample < Snabberb :: Component
  def render
    h ( :div )
  end
end

class ComponentExample < Snabberb :: Component
  def render
    h ( OtherComponent )
  end
end

Wie Snabbdom kann #H mit DOM -Elementen Requisiten annehmen, die die Form eines Diktats haben.

...
class PropsExample < Snabberb :: Component
  def render
    h ( :div , { style : { display : 'inline-block' } , class : { selected : true } } )
  end
end

Komponenten nehmen keine Requisiten an, sondern nehmen Anforderungen an, die abhängige Argumente sind.

...
class PassingNeedsExample < Snabberb :: Component
  def render
    h ( ChildComponent , need1 : 1 , need2 : 2 )
  end
end

#H kann auch mit einem Kind oder mehreren Kindern verschachtelt werden.

...
class NestedExample < Snabberb :: Component
  def render
    h ( :div , [
      h ( ChildComponent , need1 : 1 , need2 : 2 ) ,
      h ( :div , { style : { width : '100px' } } , [
        h ( :div , 'hello' ) ,
      ] )
    ] )
  end
end

Bedürfnisse

Komponenten können Anforderungen definieren, mit denen Elternkomponenten Argumente weitergeben können. Sie können auch staatlich sein, wodurch Änderungen in der gesamten Anwendung problemlos propogieren können.

Die Bedürfnisse sind standardmäßig erforderlich. Sie können mit Standardwerten festgelegt werden. Bedürfnisse sind mit Instanzvariablen, die automatisch festgelegt werden, zugänglich.

...
class NeedsExample < Snabberb :: Component
  needs :name
  needs :value , default : 0 , store : true

  def render
    onclick = lambda do
      store ( :value , @value + 1 )
    end

    h ( :div , [
      h ( :div , @name ) ,
      h ( :div , { on : { click : onclick } } , @value ) ,
    ] )
  end
end

Wenn einfache Zustandsänderungen nachverfolgt werden müssen, kann ein Bedarf das Geschäft definieren: True. Dadurch wird der gespeicherte Wert dieses Schlüssels verwendet, der auf dem Stammknoten festgelegt ist. Die Voraussetzung der Bedarfswerte wird gespeichert> Übergebene Anforderungen> Standardwert.

Anforderungen können mit #Store festgelegt werden, wodurch ein Ansichts -Update ausgelöst wird. Snabberb verwendet Snabbdom, um das DOM zu aktualisieren, sodass nur die Unterschiede in der DOM geändert werden.

Vorrangern

Sie können Ihre HTML durchrufen

 Snabberb . prerender_script ( 'LayoutClass' , 'ApplicationClass' , 'application_id' , javascript_include_tags : '' , ** needs )

Ein detailliertes Beispiel finden Sie im Roda -Beispiel.

Generieren von HTML aus einer Datei

Sie können HTML aus einer Komponente mit einer Datei generieren.

Snabberb.html_script ('path/to/my_component.rb', ** Bedürfnisse)

Dies liest sich in der Ruby -Datei am Pfad und generiert JavaScript, das HTML auf der camelcased -Version des Dateinamens aufruft.

Installation

Fügen Sie diese Zeile der GemFile Ihrer Anwendung hinzu:

 gem 'snabberb'

Und dann ausführen:

 $ bundle

Oder installieren Sie es selbst als:

 $ gem install snabberb

Entwicklung

 bundle install
bundle exec rake

Beitragen

Fehlerberichte und Pull -Anfragen sind auf Github unter https://github.com/tobymao/snabberb willkommen.

Lizenz

Das Edelstein ist unter den Bedingungen der MIT -Lizenz als Open Source erhältlich.