Шаблонизатор javascript Mustashe

Mustashe – это шаблонизатор, позволяет создавать HTML-код, вставлять в него данные и добавлять его в документ. Mustashe позволяет в какой-то степени разделить html-код от javascript. Также вы можете работать с условными оператора и операторами цикла.

Рассмотрим работу шаблонизатора Mustashe на простом примере

У нас есть следующая структура данных:

var data = [
    {
        "id":"3",
        "id_cat":"10",
        "text":"Книга Секреты JavaScript ниндзя",
        "url_link":"http://xxxLorem/id/22421421",
        "url_img":"//xxxLorem.ru/1007123068.jpg"
    },
    {
        "id":"4",
        "id_cat":"10",
        "text":"Книга JavaScript. Шаблоны",
        "url_link":"http://xxxLorem/id/6287517",
        "url_img":"//xxxLorem.ru/1002535209.jpg"
    },
    {
        "id":"5",
        "id_cat":"2",
        "text":"Книга Отзывчивый веб-дизайн",
        "url_link":"http://xxxLorem/id/8747299",
        "url_img":"//xxxLorem.ru/1007055061.jpg"
    },
    {
        "id":"6",
        "id_cat":"4",
        "text":"Книга Yii. Сборник рецептов",
        "url_link":"http://xxxLorem/id/19756871/",
        "url_img":"//xxxLorem.ru/1005845104.jpg"
    }
]

Построим на вышеприведенной основе шаблон Mustashe:

{{#products}} \
    <section> \
        <div> \
            <div class='clearfix' > \
                <a href='{{url_link}}' title=''> \
                    <img class='img'  src='{{url_img}}'> \
                </a> \
            </div> \
            <div class='txt'> \
                <div> \
                    <a href='{{url_link}}'>{{text}}</a> \
                </div> \
            </div> \
        </div> \
    </section> \
{{/products}}

Чтобы отобразить шаблон, нужно вызвать функцию Mustache.to_html() (в новой версии render):

function YourFunction(data) {  // знак решетки({{#products}}) говорит, что надо пройтись по элементам массива
  $('#yourId').append(Mustache.to_html("{{#products}} \
    <section> \
        <div> \
            <div class='clearfix' > \
                <a href='{{url_link}}' title=''> \
                    <img class='img'  src='{{url_img}}'> \
                </a> \
            </div> \
            <div class='txt'> \
                <div> \
                    <a href='{{url_link}}'>{{text}}</a> \
                </div> \
            </div> \
        </div> \
    </section> \
{{/products}}", { products: data }));
}

Функция to_html (render) принимает два аргумента: первый - шаблон в виде строки, из которой будет получен HTML-код, второй - данные для шаблона.

Как видите, внутри фигурных скобок помещаются названия свойств.

Условные операторы Mustashe

Чтобы проверить наличие, например, изображения, мы можем использовать следующую конструкцию, в случае существования пути к изображения отображаем нужный блок:

{{#url_img}}
    <img class='img'  src='{{url_img}}'> \
{{/url_img}}

Проходимся по элементам массива в Mustashe, циклы

Если существует массив товаров, как в нашем случае, то необходимо использовать оператор #.

Внутри указываются свойства каждого конкретного объекта.

// у нас массив (products)  объектов:  { products: data }

{{#products}} \
    <section> \
        <div> \
            <div class='clearfix' > \
                <a href='{{url_link}}' title=''> \
                    <img class='img'  src='{{url_img}}'> \
                </a> \
            </div> \
            <div class='txt'> \
                <div> \
                    <a href='{{url_link}}'>{{text}}</a> \
                </div> \
            </div> \
        </div> \
    </section> \
{{/products}}

Языки, поддерживающие шаблонизатор Mustache: Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, node.js. .

Полезные ссылки:

• старничка Mustache: mustache.github.io
• старничка на github.com: github.com/janl/mustache.js
• еще один перевод на русском: mustache-