snabberb

Snabberb

Snabberb هو إطار عرض روبي بسيط مبني على Opal و 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

فئة فرعية 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 الدعائم التي تأخذ شكل قول.

...
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 فقط.

صلى الله عليه وسلم

يمكنك Prerender 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 على الإصدار الملقب من اسم الملف.

تثبيت

أضف هذا السطر إلى Gemfile في التطبيق الخاص بك:

 gem 'snabberb'

ثم تنفذ:

 $ bundle

أو تثبيته بنفسك على النحو التالي:

 $ gem install snabberb

تطوير

 bundle install
bundle exec rake

المساهمة

يتم الترحيب بتقارير الأخطاء وطلبات السحب على Github على https://github.com/tobymao/snabberb.

رخصة

الجوهرة متوفرة كمصدر مفتوح بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا.