snabberb

Снабберб

Snabberb - это простой фреймворк Ruby View, построенный на опале и Snabbdom.

Вы можете писать реактивные представления в простом рубине, которые компилируются с эффективным 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 Prerendering

18xx настольный двигатель

Использование

Создание элементов DOM с H

Подкласс Snabberb :: Компонент и переопределяйте #render, чтобы построить DOV, используя #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

Когда необходимо отслеживать простые изменения состояния, необходимость может определить магазин: 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, который вызывает HTML на версии имени файла на вершине.

Установка

Добавьте эту строку в Gemfile вашего приложения:

 gem 'snabberb'

А затем выполнить:

 $ bundle

Или установите его самостоятельно как:

 $ gem install snabberb

Разработка

 bundle install
bundle exec rake

Внося

Отчеты об ошибках и запросы на тягу приветствуются на GitHub по адресу https://github.com/tobymao/snabberb.

Лицензия

Драгоценный камень доступен в качестве открытого исходного кода в соответствии с условиями лицензии MIT.