Введение в компоненты derby 0.6

[africaunite]

Отлично, спасибо и продолжайте!

несколько замеченных опечаток (хотя, возможно, мне это только кажется).
и сюда, а не в личку, вдруг кто-то уже пытается тестировать:

Очевидная:

pladeholder="Input new Todo"

видимо должно быть placeholder=


и с первого взгляда недопонятая:

this.emit('newtodo', todo);

здесь, видимо, должно быть событие addtodo?

[zag2art]

Да, вы правы. Все исправил.

[dbelka]

Спасибо за статью! А то derby совсем не торопится обновлять документацию, что меня сильно расстраивает.
Есть пара вопрсов:
1. Данные в компонент передаются только через шаблон? Не совсем понятно, почему я не могу сделать компонент, который будет работать с глобальной моделью.
2. Можно ли компоненты подгружать по мере необходимости(lazy load)?

[zag2art]

> Данные в компонент передаются только через шаблон?

По хорошему да, но никто, на самом деле, не мешает запрашивать их уже после подключения компонента, единственное нужно понимать, что метод init синхронен, поэтому всякие-там subscribe, fetch или ajax.get и т.д. невозможно выполнить до начала рендеринга, а, следовательно, серверный рендеринг страдает.

Ну а так вообще, если нужно получать данные уже в процессе работы компонента — нет никаких ограничений — в любом обработчике можно дотягивать что-либо из модели (fetch, subscribe), либо даже тягать что-то ajax-ом, если данные, лежат где-то на стороне.

> Не совсем понятно, почему я не могу сделать компонент, который будет работать с глобальной моделью.

Можете, это просто нарушит идею изолированности, а так вполне:

в js глобальная модель доступна во всех методах компонента, например

Dropdown.prototype.init = fucntion(){
  var myGlobalVar = this.model.root.get('_page.myGlobalVar');
}

Примерно то-же самое и в шаблонах. Нужно просто начинать путь с #root

<index:>
  {{each #root._page.todos as #todo}}
    <!-- ... -->
  {{/}}

> Можно ли компоненты подгружать по мере необходимости(lazy load)?

Насколько я знаю — штатных средств для этого нет, но я легко могу себе представить, как это можно сделать :)

[Nesvet]

с файлами стилей есть небольшая особенность

Забыли рассказать :-) Как вместе с шаблоном подтянуть ещё и соответствующие стили?

[zag2art]

Да, Жень, точно — забыл.

Создателем дерби изначально предполагалось, что стили будут подключаться к компонентам так же как и файлы шаблонов, но на данный момент этого так и не сделало. Чтобы понять почему, нужно немножко оглядеться вокруг.

На данный момент дерби поддерживает 3 типа файлов со стилями: чистый css, less и stylus. Самым продвинутым является stylus — его-то все и используют (и создатели дерби в своих приложениях в том числе). Не знаю, как в less-е, но в stylus-е есть один очень удобный механизм замены локальных переменных глобальными.

Сейчас я объяснию на примере, чтобы было понятно. Допустим у нас есть компонент и в файле стиля этого компонента мы определяем переменную с цветом фона $back-color ?= black. Фишка в том, что стилус (когда мы пишем ?= вместо обычного = )позволяет нам сделать это определение не жестким, а как бы поумолчанию. То есть, если мы зададим глобально $back-color = red, то фон у компонента станет красным. Это очень удобно, но для того чтобы это работало, файл стилей компонента должен быть явно импортирован в глобальном файле стилей. Обычно все так и делают.

Глобальный файл стилей получается выглядит как-то так (index.styl):

// Global vars
$back-color = red

// Import components
@import './../components/*/*.styl'

Исходя из этого, пока, создатели дерби не нашли удобного пути, как сделать чтобы можно было подключать стили и так и так.