Latest version: undefined

Change log:
undefined
Full changelog...

Sailfish.js

Sailfish.js - фреймворк для
создания `component-based`
веб приложений,
основанный на express.js

client-side компоненты

Sailfish.js предоставляет инфраструктуру
для построения приложения с помощью
компонентов.

Оптимизация

Sailfish.js автоматически осуществляет
оптимизацию загрузки страниц приложения.

Конфигурация вложенных компонентов

Любой компонент может содержать в своей разметке другие компоненты. Конфигурирование вложенных компонентов осуществляется с помощью специальной xhtml разметки.

Тэг <component></component> может содержать дочерние тэги, которые и осуществляют определение опций компонента.

Они должны соответствовать следующим правилам:

  • Имя тэга соответствует имени опции
  • После символа : указывается тип передаваемого значения (array, object, html, ref)
  • Значение опции указывается в атрибуте value или непосредственно внутри тэга.

Пример:

<component data-component="js!docs.Sidebar">
   <items:array>
      <item:object>
         <caption>Пункт меню</caption>
         <submenu:array>
            <item:object>
               <caption>Пункт подменю</caption>
               <link>/link/to/something</link>
            </item>
            ...
         </submenu>
      </item>
      ...
   </items>
</component>

Указанная выше конфигурация соответствует следующему объекту

{
   "items": [
      {
         "caption": "Пункт меню",
         "submenu": [
            {
               "caption": "Пункт подменю",
               "link": "/link/to/something"
            }
         ]
      }
   ]
}

Функции в качестве опций

В качестве опции можно передать ссылку на функцию из модуля. Для этого в качестве типа опции необходимо указать fn, а в качестве значения указать имя модуля и имя функции разделенные символом :.

Пример:

<component data-component="js!docs.Sidebar">
   <items:array>
      <item:object>
         <caption>Пункт меню</caption>
         <handler:fn>js!test.Handlers:hdlFn</handler>
      </item>
      ...
   </items>
</component>

Пример кода модуля js!test.Handlers приведен ниже

define('js!test.Handlers', {
   hdlFn: function(){
      ...
   },
   ...
})

Ссылка на опции родителя

Зачастую возникает потребность передать опции компонента в дочерний напрямую. Для этого необходимо указать тип опции ref а в качестве значения указать следующую конструкцию:

{{@it.option}}, где option - поле объекта, переданного в качестве опций.

В качестве примера рассмотрим компонент js!test.Parent, содержащий в себе компонент js!docs.Sidebar. В качестве опций js!test.Parent принимает объект с одним полем list, значением которого является массив объектов.

Вот так будет выглядеть верстка компонента js!test.Parent

<div class="docs-parent">
   <component data-component="js!docs.Sidebar">
      <list:ref>{{@it.list}}</list>
   </component>
</div>