snabberb

Snabberb

Snabberb adalah kerangka kerja tampilan ruby sederhana yang dibangun di atas opal dan snabbdom.

Anda dapat menulis tampilan reaktif dalam ruby polos yang dikompilasi ke javascript yang efisien.

Contoh inline

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

Contoh

Aplikasi rak

Aplikasi Roda dengan HTML Prerendering

Mesin permainan papan 18xx

Penggunaan

Membuat elemen dom dengan h

Subclass snabberb :: komponen dan override #render untuk membangun div menggunakan #h.

Render seharusnya hanya mengembalikan satu elemen root.

#h mengambil simbol dom (: div ,: span ,: a, ...) atau kelas snabberb :: komponen lainnya.

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

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

Seperti snabbdom, #h dengan elemen dom dapat mengambil alat peraga yang berbentuk dikt.

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

Komponen tidak mengambil alat peraga, sebaliknya mereka mengambil kebutuhan yang merupakan argumen tergantung.

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

#h juga bisa bersarang dengan anak atau banyak anak.

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

Kebutuhan

Komponen dapat menentukan kebutuhan yang memungkinkan komponen induk untuk meneruskan argumen. Mereka juga dapat menjadi stateful yang memungkinkan perubahan untuk dengan mudah menopang di seluruh aplikasi.

Kebutuhan secara default diperlukan. Mereka dapat diatur dengan nilai default. Kebutuhan dapat diakses dengan variabel instance yang secara otomatis diatur.

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

Ketika perubahan keadaan sederhana harus dilacak, suatu kebutuhan dapat menentukan toko: Benar. Ini akan menggunakan nilai tersimpan dari kunci ini yang diatur pada node root. Prioritas nilai kebutuhan disimpan> Kebutuhan yang ditularkan> Nilai Default.

Kebutuhan dapat diatur dengan #Store yang akan memicu pembaruan tampilan. Snabberb menggunakan snabbdom untuk memperbarui DOM, jadi hanya perbedaan dalam DOM yang diubah.

Prerendering

Anda dapat prerender html Anda dengan menelepon

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

Contoh terperinci dapat ditemukan dalam contoh RODA.

Menghasilkan html dari file

Anda dapat menghasilkan HTML dari komponen dengan file.

Snabberb.html_script ('path/to/my_component.rb', ** kebutuhan)

Ini dibaca dalam file Ruby di jalur dan menghasilkan JavaScript yang memanggil HTML pada versi yang disamarkan dari nama file.

Instalasi

Tambahkan baris ini ke gemfile aplikasi Anda:

 gem 'snabberb'

Dan kemudian mengeksekusi:

 $ bundle

Atau instal sendiri sebagai:

 $ gem install snabberb

Perkembangan

 bundle install
bundle exec rake

Berkontribusi

Laporan bug dan permintaan tarik dipersilakan di GitHub di https://github.com/tobymao/snabberb.

Lisensi

Permata tersedia sebagai open source di bawah ketentuan lisensi MIT.