snabberb

Snabberb

Snabberbは、OpalとSnabbdomに基づいて構築されたシンプルなRubyビューフレームワークです。

効率的なJavaScriptにコンパイルするPlain Rubyにリアクティブビューを書くことができます。

インラインの例

 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' ) 

例

ラックアプリ

HTMLプレレンダー付きRODAアプリ

18xxボードゲームエンジン

使用法

HでDOM要素を作成します

サブクラスSnabberb ::コンポーネントとオーバーライド#render #hを使用してDivを構築します。

レンダリングは1つのルート要素のみを返す必要があります。

#hは、domシンボル（：div、：span、：a、...）または別のsnabberb :: componentクラスのいずれかを取得します。

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

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

Snabbdomのように、DOM要素を持つ＃Hは、DICTの形をとる小道具を取ることができます。

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

コンポーネントは小道具を取りません。代わりに、依存する引数であるニーズを取ります。

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

#Hは、子供や複数の子供でネストすることもできます。

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

ニーズ

コンポーネントは、親コンポーネントが引数を渡すことを可能にするニーズを定義できます。また、アプリケーション全体で変更を簡単に提案できるようにするステートフルにすることもできます。

デフォルトではニーズが必要です。デフォルト値で設定できます。ニーズは、自動的に設定されたインスタンス変数を使用すると認められます。

...
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

単純な状態の変更を追跡する必要がある場合、ニーズはストア：trueを定義できます。これにより、ルートノードに設定されたこのキーの保存値が使用されます。ニーズ値の優先順位は保存されます>渡されたニーズ>デフォルト値。

ニーズは、ビューの更新をトリガーする#storeで設定できます。 SnabberbはSnabbdomを使用してDOMを更新するため、DOMの違いのみが変更されます。

プレレンダー

電話してHTMLをプレレンダーできます

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

詳細な例は、RODAの例にあります。

ファイルからHTMLを生成します

ファイルを持つコンポーネントからHTMLを生成できます。

snabberb.html_script（ 'path/to/my_component.rb'、** neids）

これは、パスのRubyファイルで読み取り、ファイル名のCaMelcasedバージョンでHTMLを呼び出すJavaScriptを生成します。

インストール

この行をアプリケーションのGemfileに追加します。

 gem 'snabberb'

そして実行してください：

 $ bundle

または、自分でインストールします：

 $ gem install snabberb

発達

 bundle install
bundle exec rake

貢献

バグレポートとプルリクエストは、https://github.com/tobymao/snabberbのGithubで大歓迎です。

ライセンス

宝石は、MITライセンスの条件の下でオープンソースとして利用できます。