snabberb

snabberb

Snabberb是建立在Opal和Snabbdom上的簡單Ruby View框架。

您可以在平原紅寶石中編寫反應性視圖，以將其編譯為有效的JavaScript。

內聯示例

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

例子

機架應用

Roda應用程序帶有HTML預先啟動

18xx棋盤遊戲引擎

用法

用H創建DOM元素

子類Snabberb ::組件和覆蓋#render #render使用#H構建Divs。

渲染只能返回一個根元素。

＃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可以採用以下形式的道具。

...
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'，**需求）

這在路徑上的Ruby文件中讀取，並生成JavaScript，該JavaScript在文件名的駱駝版本上調用HTML。

安裝

將此行添加到您的應用程序的gemfile：

 gem 'snabberb'

然後執行：

 $ bundle

或自行安裝：

 $ gem install snabberb

發展

 bundle install
bundle exec rake

貢獻

歡迎在https://github.com/tobymao/snabberb上的GitHub上的錯誤報告和拉動請求。

執照

根據MIT許可證的條款，該寶石可作為開源。