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许可证的条款，该宝石可作为开源。