snabberb

Snabberb

Snabberb เป็นกรอบมุมมองทับทิมที่เรียบง่ายที่สร้างขึ้นบนโอปอลและ snabbdom

คุณสามารถเขียนมุมมองปฏิกิริยาในทับทิมธรรมดาที่รวบรวมไปยังจาวาสคริปต์ที่มีประสิทธิภาพ

ตัวอย่างอินไลน์

 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 prerendering

เครื่องยนต์เกมบอร์ด 18xx

การใช้งาน

การสร้างองค์ประกอบ DOM ด้วย H

subclass snabberb :: ส่วนประกอบและแทนที่ #render เพื่อสร้าง divs โดยใช้ #H

การเรนเดอร์ควรส่งคืนองค์ประกอบรูทเดียวเท่านั้น

#H ใช้สัญลักษณ์ DOM (: div ,: span ,: a, ... ) หรือ snabberb อื่น ๆ :: คลาสองค์ประกอบ

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

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

เช่นเดียวกับ snabbdom #h ที่มีองค์ประกอบ DOM สามารถใช้อุปกรณ์ประกอบฉากที่อยู่ในรูปแบบของ 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

เมื่อต้องติดตามการเปลี่ยนแปลงสถานะอย่างง่ายความต้องการสามารถกำหนดร้านค้า: จริง สิ่งนี้จะใช้ค่าที่เก็บไว้ของคีย์นี้ซึ่งตั้งค่าบนโหนดรูท ความสำคัญของค่าความต้องการจะถูกเก็บไว้> ความต้องการที่ผ่านมา> ค่าเริ่มต้น

ความต้องการสามารถตั้งค่าด้วย #Store ซึ่งจะทริกเกอร์การอัปเดตมุมมอง Snabberb ใช้ snabbdom เพื่ออัปเดต DOM ดังนั้นเฉพาะความแตกต่างใน DOM เท่านั้นที่เปลี่ยนไป

การทำล่วงหน้า

คุณสามารถ preerender 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 ที่เรียก HTML บนชื่อไฟล์ Camelcased ของชื่อ

การติดตั้ง

เพิ่มบรรทัดนี้ใน Gemfile ของแอปพลิเคชันของคุณ:

 gem 'snabberb'

แล้วดำเนินการ:

 $ bundle

หรือติดตั้งด้วยตัวเองเป็น:

 $ gem install snabberb

การพัฒนา

 bundle install
bundle exec rake

การบริจาค

รายงานข้อผิดพลาดและคำขอดึงยินดีต้อนรับบน GitHub ที่ https://github.com/tobymao/snabberb

ใบอนุญาต

อัญมณีมีให้เป็นโอเพ่นซอร์สภายใต้ข้อกำหนดของใบอนุญาต MIT