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

예

랙 앱

HTML 사전 렌더링이있는 Roda 앱

18xx 보드 게임 엔진

용법

h로 DOM 요소 생성

서브 클래스 snabberb :: 구성 요소 및 #Render를 재정의하여 #H를 사용하여 div를 빌드합니다.

렌더는 하나의 루트 요소 만 반환해야합니다.

#h는 dom 기호 (: div, : span, : a, ...) 또는 다른 snabberb :: component class를 취합니다.

...
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', ** yelse)

이것은 경로의 루비 파일에서 읽히고 파일 이름의 낙타 기반 버전에서 html을 호출하는 JavaScript를 생성합니다.

설치

이 라인을 응용 프로그램의 보석에 추가하십시오.

 gem 'snabberb'

그런 다음 실행 :

 $ bundle

또는 직접 설치하십시오.

 $ gem install snabberb

개발

 bundle install
bundle exec rake

기여

https://github.com/tobymao/snabberb에서 버그 보고서 및 풀 요청은 환영합니다.

특허

보석은 MIT 라이센스의 조건에 따라 오픈 소스로 제공됩니다.