transformations.js

/*
 * Формат для внешнего пользователя
 */
<CardMovies>
    <item href="#">
        <thumb>...</thumb>
        <title>Черный Лебедь</title>
    </item>
    <item href="#">
        <thumb>...</thumb>
        <title>Безумный Макс: дорога ярости</title>
    </item>
    <item href="#">
        <thumb>...</thumb>
        <title>Интерстеллар</title>
    </item>
    ...
</CardMovies>

/*
 * Трансформация
 */
Beast.decl({
    CardMovies: {
        expand: function () {
            this.append(
                // Добавления элемента заголовок
                <title>Афиша</title>,
                
                // Подключение компонента (т.е. блока), которому передаются дети
                <Showcase ItemRatio="2x3" ItemCol="3" LinkMethod="query">
                    {this.get('item')}
                </Showcase>
            )
        }
    }
})

/*
 * ...Showcase тоже разворачивает свое содержимое...
 */

/*
 * Результат для отображения в DOM
 */
<CardMovies>
    <title>Афиша</title>
    <Showcase ItemRatio="2x3" ItemCol="3" LinkMethod="query">
        <hidescroll>
            <item href="#">
                <thumb>...</thumb>
                <title>Черный Лебедь</title>
            </item>
            <item href="#">
                <thumb>...</thumb>
                <title>Безумный Макс: дорога ярости</title>
            </item>
            <item href="#">
                <thumb>...</thumb>
                <title>Интерстеллар</title>
            </item>
        <hidescroll>
    </Showcase>
</CardMovies>