Mustache.js – обзор, начало работы, разработка HTML шаблонов с mustache


Содержание

Mustache.js – обзор, начало работы, разработка HTML шаблонов с mustache

Mustache — шаблонизатор, который содержит минимум управляющей логики и доступен для разных языков программирования. Его можно использовать и на сервере (PHP, Ruby и т.д.), и на клиенте (Javascript).

Если вы динамически подгружали с сервера блоки HTML-кода, а не структурированные данные только потому, что не хотели дублировать рендеринг на сервере и на клиенте, то Mustache поможет этого избежать.

Отличное решения для удаленного офиса —
сервера в Европе. Защити свой бизнес!

Шаблон пишется на простом языке, состоящем из нескольких типов тегов. Теги обрамляются двумя или тремя фигурными скобками с каждой стороны. Можно использовать вложенные шаблоны.

Рассмотрим простой пример шаблона:

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

Чтобы «запустить» шаблонизатор и отрисовать с помощью шаблона данные, необходимо подключить библиотеку:

И вызывать рендеринг методом to_html :

Здесь первым параметром передается шаблон, а вторым — данные. Так же можно использовать третий параметр —список дополнительных шаблонов, и четвертый — функцию callback, которая вызывается после обработки шаблона.

Более подробно о тегах

Всего в Mustache четыре основных типа тегов: переменная, секция, комментарий и подключение дополнительного шаблона.

Переменная выводит данные с экранированием HTML-сущностей <

> и без экранирования <<>> . Отличаются они количеством скобок. В нашем случае, вместо <
> подставится строчка «Новый пост».

Секция представляет собой парный тег. Принцип ее действия зависит от типа данных, с которыми она работает. Если в контексте имени секции соответствует поле со списком, то шаблонизатор проходит по его элементам и текст внутри парного тега обрабатывается по одному разу для каждого элемента списка. Элемент списка подставляется заместо тега-точки. Так, например, секция <<#authors>>

  • <<.>><> превратится в
  • alex
  • daemon
  • john . Если список пуст, то обрабатывается содержимое «тега с крышечкой», в нашем случае — это <<^authors>> … <> .

    Если имени секции соответствует функция, то для подстановки будет использован результат ее выполнения.

    Если поле, соответствующее имени секции, не является ни списком, ни функцией, то оно будет использоваться в качестве контекста для обработки содержимого тега.

    Комментарий оформляется в виде тега с восклицательным знаком, например, <> .

    Подключение дополнительного шаблона вызывается с помощью тега с угловой скобкой. Например, <<>copyright>> . Если в текущем контексте присутствует поле с таким названием, то оно будет передано в качестве контекста для подключаемого шаблона.

    Производительность

    Вопросы производительности Javascript шаблонизаторов рассматриваются в этой статье. Автор провел тестирование восьми шаблонизаторов и выяснил, что на простых шаблонах Mustache показывается лучшую производительность.

    Пример работы

    Сайт проекта: http://mustache.github.com/. Если у читателей возникли какие-то вопросы, я с удовольствием на них отвечу.

    Автор: Александр Яшин

    Фрилансер. Программист. Разрабатывает интернет-магазины и мобильные приложения.
    Его твиттер и веб-сайт.

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

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

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

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

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

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

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


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

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

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

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

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

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

    Различные реализации Mustache

    Существует два типа шаблонов: server-s >

    В ситуации, когда ваше веб-приложение в основном зависит от Ajax, проблемно поддерживать одновременно оба шаблона на стороне сервера и шаблон на стороне клиента без дублирования.

    Mustache.php

    Копия библиотеки Mustache.php, на официальной странице проекта GitHub . Если вы знакомы с использованием composer, рекомендуется установить Mustache, для лучшего управления зависимостями.

    Добавьте следующие строки в ваш файл composer.json и запустите либо установку composer или обновления composer (по обстоятельствам):

    Простой пример для шаблона с Mustache.php.

    Первый загрузчик composer включен (в качестве альтернативы, вы можете использовать авто-загрузчик Mustache, если вы работаете с клоном или с загруженной копии библиотеки). Затем метод класса render() Mustache_Engine сформирует мнение, передавая его данные шаблона и некоторые изменённые значения.

    Шаблоны должны хранить свои файлы в отдельном каталоге. Вы можете указать пути к файлам шаблона при создании экземпляра класса Mustache_Engine .

    Загрузчик в конфигурации массива определяет путь к файлам шаблона (более подробную информацию о параметрах конфигурации можно найти в Mustache.php Wiki ). В этом случае файлы шаблонов находятся внутри каталога шаблонов. Метод LoadTemplate() загружает файл templates/greeting.mustache .

    Вкратце мы рассмотрели необходимую теорию для работы с mustache, теперь мы можем посмотреть на то, как разделить шаблоны.

    Совместное использование Шаблонов между PHP и JavaScript

    Наша главная цель разделить шаблоны между PHP (server-side), и JavaScript (client-side). На основе нашего примера, давайте предположим, что у нас есть сайт интернет-магазин, с двумя категориями товара: Книги и Фильмы. Когда пользователь в первый раз заходит на сайт, все продукты категорий будут отображаться в одном списке, как показано ниже.

    В списке видно, что описание каждого типа продукта отличаются, поэтому нам нужны отдельные шаблоны для двух разных видов товара.
    Создайте два шаблона, один с названием books.mustache а другой movies.mustache. Файл books.mustache будет выглядеть так:

    Это простой шаблон из раздела с конкретными переменными. <<#products>> используется для прохода по всем элементам внутри раздела продукции массива. <<#book>> используется, чтобы проверить, если элемент является собственно книгой. Если ключа не существует, то ничего не будет показываться пользователю.

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

    Мы используем два запроса к базе данных, чтобы вытащить данные о книгах и фильмах из базы данных и сохранить их в массив для передачи в шаблоны. В примере используется методы PDO для вывода данных, вы можете использовать свой собственный уровень абстракции базы данных или ORM, если хотите.

    Шаблоны для книг и фильмов загружаются отдельно как две переменные, используя метод LoadTemplate() , при этом передаётся продукт массива каждому шаблону методом Render() . Он обрабатывает шаблон для данного продукта и возвращает HTML.

    Для фильтрации результатов по видам продукции, мы могли получить все отфильтрованные книги (или фильмы), а HTML-от серверов, но все разметки будут нести дополнительные расходы для каждого запроса. Нам абсолютно не нужно, отправлять ту же разметку снова и снова. На стороне клиента шаблоны начнут работать, и мы можем сохранять необходимые шаблоны в памяти клиента и загрузку данных с сервера с помощью Ajax.

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

    Для того, чтобы использовать эти шаблоны в JavaScript, мы просто должны подключить библиотеку Mustache.js в документ. Вы можете получить копию mustache.js файла из страницы GitHub и подключить его в HTML следующим образом:

    После того как пользователь выбирает опцию фильтра, мы можем получить данные с помощью запроса Ajax. Но в отличие от первоначальной загрузки страницы, мы не будем применять шаблоны данных перед их отправкой клиенту, так как у нас уже есть шаблоны, доступные на стороне клиента.

    Список книг извлекается из базы данных, и возвращается для клиента в формате JSON, и тогда мы получаем шаблон книг в рамках своего сценария с помощью тега $(«#booksTmpl»).html() и передаём его как шаблон и данных на сторону клиента. Потом с генерированный код, возвращается обратно на страницу в категории продукции.

    Заключение

    Работа с отдельными движками шаблонов как на стороне клиента так и на стороне сервера может быть сложной задачей, и может привести к дублированию шаблона. К счастью, различные реализации Mustache позволяют разделить те же шаблоны между обеими сторонами. Это повышает пригодность вашего кода.

    Mustache. Проитерировать коллекцию объектов в .mustache

    если в books передать массив значений все работает:

    как переписать код, если books содержит несколько полей (название, описание)

    контроллер:


    1 ответ 1

    тогда указавать названия полей

    Всё ещё ищете ответ? Посмотрите другие вопросы с метками java шаблонизаторы mustache или задайте свой вопрос.

    Похожие

    Подписаться на ленту

    Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

    дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35402

    Easy HTML Templates with Mustache

    Templates are a great way to separate your website’s code from its design. There are many great web template systems available for different languages and platforms, including Smarty for PHP and the Django template language for Python.

    In this tutorial you’ll explore Mustache, a relatively new and very simple template system that you can easily use to create HTML templates. You’ll look at various topics, including:

    • The advantages of using Mustache
    • How to install and use the Mustache processor
    • How Mustache tags, variables, and data objects work
    • Using sections to create conditions and loops
    • Including one Mustache template inside another
    • …and lots more!

    Along the way, you’ll see plenty of code examples that show you how Mustache works. At the end of the tutorial, there’s a complete example that uses Mustache, along with jQuery, to create a simple Ajax-based product list page.

    What is Mustache?

    Mustache is a simple template system that you can use when building websites and web apps. By using a template system, you can keep your back-end code separate from the markup that displays the front end to the user. This clean separation gives you many advantages. For example, it makes it easy for a designer to work on a website’s visual design without the risk of messing up the site’s code. It also makes it easy for you to change the design at a later point without impacting the back-end code.

    One of Mustache’s big plus points is that is , which means it keeps your templates very neat and tidy. There are no messy if . then or looping constructs embedded within a Mustache template; it’s all just markup and simple Mustache tags. All the logic is hidden away inside your data objects (and the code that creates or fetches them).

    Илон Маск рекомендует:  Перечисление сетевых интерфейсов

    Another advantage of Mustache is that you’re not tied to any particular language. Mustache processors are available in many languages, including JavaScript, PHP, Perl, Ruby, Python, Java and lots more.

    You can use Mustache for practically any kind of template, including config files and even source code. However, this article concentrates on using Mustache to build HTML templates, which is a very popular use of the system.

    Mustache is used by a lot of popular websites and web apps, including Twitter and OMGPOP (maker of the ever-popular Draw Something game). Here’s a list of sites that use Mustache.js, the JavaScript version of Mustache.

    A basic Mustache example

    What does a Mustache template look like? Here’s a simple example:

    As you can see, this template is essentially HTML mixed with a few special Mustache tags. A begins with two opening braces ( << ) and ends with two closing braces ( >> ).

    As you might have guessed, the << and >> delimiters are where Mustache gets its name from!

    Inside each tag is the name of a (in this case, name , colour , and price ). When Mustache processes the template, it replaces each variable name with an actual value.

    But where does Mustache get the values for the variables in the template? The answer is that, when you pass the template to the Mustache processor, you also pass an object or hash containing the variable names and their associated values:

    The exact format of the object or hash depends on the language you’re using. The above example is a JavaScript (or JSON) object. But essentially you pass Mustache a list of name/value pairs.

    When you pass the template and object to the Mustache processor, it combines the two and returns the final HTML, with the variable names replaced by their values:

    Installing Mustache

    The Mustache processor is available in a wide range of languages. As a general rule, you install Mustache like this:

    1. Visit the GitHub page for your chosen language (for example, JavaScript or PHP).
    2. Click the ZIP button to download the repository Zip file.
    3. Unzip the downloaded file, and move the resulting folder to your website.
    4. Include the relevant library file (such as mustache.js or Mustache.php ) in your web pages or server-s >There are some subtle differences between the Mustache implementations for different languages. Make sure you read the documentation specific to the Mustache processor you’re using.

    Running the Mustache processor

    The syntax for calling the Mustache processor depends on the language you are using. Essentially though, you call the Mustache class’s or object’s render() method, passing in the template string followed by the data object. The processor then combines the template with the data object to produce the final markup string, which it returns.

    Here are some examples:

    A Mustache demo page

    Let’s get going with a simple demo page that shows Mustache in action. We’ll use mustache.js — the JavaScript implementation of Mustache — so that we can run the demo straight in the browser, without needing to write any server-side code.


    The JavaScript version of Mustache is very handy for Ajax-driven web apps. Your app can pull JSON data from the server using Ajax, then combine the data with a Mustache template to create the final markup for displaying in the page. You’ll learn how to do this in the complete example at the end of the tutorial.

    Grab mustache.js

    To start building the demo page, you first need to install the JavaScript Mustache processor:

    1. Create a folder somewhere on your computer
    2. Download and unzip the JavaScript Mustache processor
    3. Copy the resulting mustache.js file into your folder

    The HTML page

    Here’s the demo page — save it as demo.html in the same folder as your mustache.js file:

    This page contains the following elements:

    • A style.css include
      This contains the CSS to display the demo page. We’ll create this file shortly.
    • Three JavaScript includes
      We’ve included jQuery, the mustache.js library file, and a mustache-demos.js JavaScript file (which we’ll create in a moment).
    • A textarea with an id of «template»
      This contains the Mustache template that we want to use. Notice that the template is mainly HTML markup, with a few Mustache tags, indicated by the << and >> delimiters.
    • A textarea with an id of «data»
      This contains JavaScript code that creates an object variable called data , with three properties: «name» , with a value of «SuperWidget» ; «colour» , with a value of «Green» ; and «price» , with a value of «19.99» .
    • A button with an id of «process»
      When clicked, this button calls a JavaScript function, process() , which runs the Mustache processor to produce the finished HTML. We’ll create this function in a moment.
    • A textarea with an id of «html»
      This will contain the finished HTML generated by the Mustache processor, displayed as source markup.
    • A div with an id of «result»
      This will contain the finished HTML generated by the Mustache processor and rendered by the browser, so that you can see how the ends result looks in the page.

    The style sheet

    Here’s the style sheet for the page — save it as style.css in the same folder as demo.html :

    This CSS aligns the various elements in the demo page — including the textarea s, the #result div , and the #process button — and styles them.

    The JavaScript

    Finally, here’s the JavaScript code for the demo page — save it as mustache-demos.js in the same folder as demo.html :

    This function, process() , runs when the user presses the Process Template button in the page. The function:

    1. Extracts the template code stored in the #template textarea , and stores it in the variable template .
    2. Calls eval() on the contents of the #data textarea , which creates the data object.
    3. Calls Mustache.render() , passing in the Mustache template stored in template , as well as the data object stored in data . This generates the finished markup, which the code then stores in the html variable.
    4. Inserts the markup stored in html into the #html textarea , as well as the #result div , so that the markup can be both viewed by the user and rendered by the browser.

    Try it out!

    To try out the demo, open demo.html in your browser, or press the button below:

    You’ll see four boxes in the page. The Mustache Template box and the Data Object box are filled with the template code and the JavaScript code to generate the data object. The HTML Result and How It Looks boxes are initially blank.

    Now press the Process Template button. This runs the Mustache processor, passing in the template and the data object. The resulting markup then appears in the HTML Result box, and is rendered in the How It Looks box:

    Try editing the contents of the Mustache Template and Data Object boxes, then pressing the Process Template button again to see the results. This is a great way to play with Mustache and see what it can do.

    Delving deeper into variables

    So far you’ve learned how to create a Mustache variable by placing the variable name inside a Mustache tag, then creating a property with the same name inside your data object.

    Let’s look at some more features of Mustache variables. In this section you’ll explore expressions and functions; how to access object properties and methods within templates; how Mustache handles missing variables; and how Mustache HTML-escapes certain characters within variable values.

    Expressions and functions

    With most languages, you’re not limited to using literal values in your Mustache data objects. You can also use expressions and functions as values. This means your object can contain properties such as:

    (where calcPrice() is a function). Mustache then replaces the variable tag with the result of the expression, or the return value of the function, in the output.

    One notable exception to this rule is JSON, which doesn’t allow expressions as property values.

    Accessing object properties and methods

    Your data object can also contain other objects — for example:

    To access a property or method of an object from within your Mustache template, you can use the dot ( . ) notation, like this:

    Combining the above object and template produces the following output:


    Missing variables

    If you use a variable name in your template that doesn’t appear in the corresponding data object, Mustache simply replaces the tag with an empty string. For example, this Mustache template:

    when combined with this data object:

    produces this result:

    HTML escaping

    Mustache automatically replaces certain HTML characters, such as and > , with their equivalent HTML entities, such as and > . If you don’t want Mustache to HTML-escape a value, put triple braces around the variable name instead of double braces, like this:

    Alternatively, you can place an ampersand after the opening double brace, like this:

    A quick demo

    Press the button below to see expressions, functions, accessing object properties, missing variables, and HTML escaping in action:

    Working with sections

    Sections let you add more power to your templates. Using sections, you can display a chunk of markup only if a certain condition is true (or false). You can also create repeating sections, which let you display lists and tables of data.

    The basic syntax for a section looks like this:

    Conditional sections

    A conditional section is a block of markup that is displayed only if a certain condition is true. Here’s an example.

    Say your template looks like this:

    If your data object looks like this:

    …then the output will look like this:

    On the other hand, if your data object looks like this:

    …then nothing will be output.

    Inverted sections

    Inverted sections are the opposite of conditional sections. With an inverted section, the section’s content is only output if the section’s variable is false.

    You create an inverted section by replacing the «#» character with a «^» character. For example:

    The li element in the above example is only output if the value of the inStock variable is false .

    To try out conditional sections and inverted sections, press the button below:

    Press the Process Template button. Since the value of inStock is true , the “Buy Now!” link is displayed. Now try changing inStock to false in the data object:

    Now when you press the Process Template button, the “Sorry, out of stock” message is displayed instead.

    Repeating sections

    Repeating sections are handy when you want to display a list or table of related data in the page. You create a repeating section like this:

    1. Add a section ( for example, <<#mySection>> . <> ) to your Mustache template.
    2. Inside the section, place the markup and any variable tags that you want to display for each item in the list.
    3. Add a list (or array) property to your data object. Give the property the same name as the section (for example, mySection ).
    4. Each item in the list should be an object containing the properties corresponding to the variable tags you added in Step 2.

    The Mustache processor then loops through the objects in the list. For each object, it replaces the variable tags in the section with the properties of the object, and outputs the section’s markup.

    Here’s an example. First, the Mustache template:

    Next, the data object:

    And finally, the resulting output:

    You can try out this example by pressing the button below:


    Adding comments in Mustache

    To insert a comment in a Mustache template, use the following syntax:

    The whole comment tag is ignored by the Mustache processor.

    Including Mustache templates with partials

    Partials allow you to include one Mustache template inside another. This lets you keep your templates modular and organized.

    In the JavaScript version of Mustache, you create an object containing all your partials:

    Then, to insert a partial at a given point in a template, you use the syntax:

    So to include the partial called «myPartial» , you’d write:

    You can also include a partial within another partial, which lets you make nested includes.

    Then, when you run the Mustache processor, you pass your partials object as the third argument, like this:

    Here’s an example of partials in action. First, we’ll create a couple of partials, productInfo and buyLink :

    productInfo displays a product’s name, colour and price, It also includes the buyLink partial, which displays the “Buy Now!” link (or the “Sorry, out of stock” message if the product is out of stock).

    Now let’s create our template:

    This template displays the product name inside an h3 element, then includes the productInfo partial to display the product info.

    Here’s the data object that we’ll use for our product data:

    Finally, we call the Mustache render() method to create the final markup:

    This displays the following alert box:

    Bringing it all together

    Let’s build a complete JavaScript demo that shows off some of Mustache’s great features. We’ll create a simple product list page with a Get Products button. When the user clicks the button, the JavaScript code uses Ajax to fetch the product data from the server, then uses a Mustache template to display the product data in an HTML table.

    The HTML page

    First, create the main page for the product list demo. Save the following code as productList.html in a folder in your website. Also, copy the mustache.js and style.css files that you used earlier in the tutorial into the same folder.

    The page’s body contains:

    • A heading
    • A Get Products button that, when pressed, calls the JavaScript function getProducts() , and
    • An empty #productList div that will contain the products table.

    The page also contains the JavaScript to fetch and display the product list. First the JavaScript sets up some variables:

    • template , data and html will hold the Mustache template, the data object, and the final product list HTML respectively.
    • gotTemplate and gotData will be used to track when the JavaScript has finished fetching the Mustache template and the product data respectively. When both have been fetched, the list can be displayed.

    The getProducts() function runs when the user presses the Get Products button. It makes two calls to jQuery Ajax methods in order to retrieve two files from the server:

    • productListTemplate.mustache
      The function fetches this file using the jQuery get() method. This is the Mustache template file for the products list; we’ll create this file in a moment.
    • products.txt
      This file is fetched using the jQuery getJSON() method. This method works like get() , but is specifically designed for retrieving JSON data, which it then parses and turns into a JavaScript object. products.txt contains the product data in JSON format. Again, we’ll create this in a minute.

    With both Ajax requests, the code passes in an anonymous callback function that runs once the request completes. Each function does the following:

    1. It stores the returned data in the appropriate variable ( template or data ).
    2. It set the appropriate tracking variable to true ( gotTemplate or gotData ).
    3. If both tracking variables have been set to true , it calls processTemplate() to display the product list.

    If you’re new to Ajax programming or jQuery, check out Ajax with jQuery: A Beginner’s Guide.


    Finally, the processTemplate() function calls Mustache.render() to create the product list markup, passing in the Mustache template stored in template , and the data object stored in data . It stores the markup in the html variable, which it then passes to jQuery’s html() method to insert the markup into the #productList div , displaying the table to the user.

    The Mustache template

    Here’s the Mustache template that displays the product list table — save it as productListTemplate.mustache in the same folder as productList.html :

    As you can see, the template is HTML markup interspersed with Mustache tags. The template comprises:

    • A header row containing the column headers: Product, Colour, Price and Buy.
    • A <<#product>> . <> Mustache section. This section displays a row of product data in the table. Since the product property in our data object is an array of objects (as you’ll see in a moment), this section will run repeatedly to display all the rows in the products table.The section contains:
        1. Mustache variables to display the product name, colour, and price.
        2. Two conditional sections. The markup between <<#inStock>> . <> is displayed if the inStock variable is true ; it comprises a dummy “Buy Now!” link that uses the id variable to identify the product. The markup between <<^inStock>> . <> is displayed if inStock is false ; it simply displays an “Out of Stock” message.

    The data file

    The last file we need to create contains the product data in JSON format. Save the following code as products.txt in the same folder as productList.html :

    This file defines a JSON object that contains a product array. The product array contains four elements, each of which is an object representing a product. Each product object contains id , name , colour , price and inStock properties.

    In a real-world site or app, this file would likely be dynamically generated by a server-side script that pulls the data from a database, rather than stored as a static file on the server.

    Try it out!

    To try out the product list demo, browse to the URL for the productList.html file in your website — for example, http://mywebsite/productList.html — or press the button below to see it running on our server:

    Since the demo uses Ajax to fetch the template and data files, you need to view the demo running on a web server. Opening the productList.html file directly in your browser probably won’t work.

    Now press the Get Products button in the page. When you do this, the getProducts() function runs, retrieving the productListTemplate.mustache and products.txt files from the server via Ajax. Once the files have been fetched, processTemplate() calls Mustache’s render() method to combine the Mustache template with the product data and produce the product list table, which is then displayed in the page:

    Summary

    In this article you’ve explored the Mustache template system, and seen how you can easily use it to build clean, logic-less templates. You’ve looked at:

    • What Mustache is, and why it’s useful.
    • A basic example of a Mustache template with tags and variables, as well as a data object.
    • How to install the Mustache processor on your website.
    • Running the processor by calling the render() method.
    • Building a simple demo page that you can use to try out various Mustache features.
    • Using expressions and functions in data objects.
    • How to access object properties and methods in your Mustache templates.
    • What happens when Mustache can’t find a variable.
    • How Mustache escapes HTML characters, and how to bypass escaping.
    • The concept of Mustache sections, including conditional sections, inverted sections, and repeating sections (loops).
    • How to add comments in Mustache templates.
    • Including one Mustache template inside another by using partials.
    • A complete example that uses JavaScript, jQuery, Ajax and Mustache to build a simple product list page.

    There are a few more Mustache features worth checking out, including lambdas (which let you manipulate un-parsed sections of Mustache templates) and the ability to change the default Mustache delimiters, << and >> , to something else. To find out more, take a look at the Mustache spec.

    Reader Interactions

    Comments

    This is cool technology for templates.
    I will surely invest time in this complete tutorial.
    I have used demos.
    Can anyone tell me list of tool or tools from which i can make my own logo with ease?
    I am not a designer, just need for my clients.
    So, for this i am not going to learn photoshop like tools.
    Mean while, Thanks Matt for introduction of Mustache!

    Great tutorial.
    What is the best way to use Mustache with your ‘CMS in an Afternoon’?

    Creating HTML Templates with Mustache.js

    Web applications use MVC architectures to separate business logic from the presentation views. Complex projects which involves large amounts of client side HTML manipulation with JavaScript can be difficult to maintain. In such scenarios we can use template systems to increase reusability and ease the task of managing views. Mustache.js provides a well documented template system which can be used to manage your templates. And, since mustache supports various languages, we don’t need a separate templating system on the server side. This article covers the basics of working with mustache.

    Why We Need Template Systems

    Most developers that are not aware of template systems create new chunks of HTML code and dynamically insert them into the DOM using JavaScript. A common way of doing this is to specify the HTML elements in a string and then set the innerHTML property or call the jQuery html() method. An example of this technique is shown below.

    Another method for building the DOM is to create elements and append them individually, as shown below.

    Both the methods above can be used effectively to add elements dynamically into your document. Consider a situation where we have a very well designed bullet list which needs to be used across three different types of pages in our site. Using these techniques, we would have to repeat the HTML code the list in three different locations. This is generally considered to be bad coding practice.

    In such scenarios we can use predefined templates in different locations without repeating the code. Mustache.js is a very popular template engine using JavaScript. Since mustache provides both server side and client side templates for numerous languages, we don’t have to worry about choosing separate template engines.

    Getting Started with Mustache.js

    Mustache is an open source logic-less template system developed for languages such as JavaScript, Ruby, Python, PHP, and Java. You can grab a copy of the library by visiting the official page on GitHub. Mustache provides templates and views as the basis for creating dynamic templates. Views contain the data to be included in the templates as JSON. Templates contain the presentation HTML or data with the template tags for including view data. Earlier, we mentioned mustache as logic-less. This means the templates will not contain any if-else conditions or for loops. Now, let’s get started on mustache templates using a simple example.

    First, we need to include the mustache.js file in the document. Then we can work on creating mustache templates. In the above example we have a view containing the name and occupation of a person. Then, we have the template inside the render() function with presentation code and tags for name and occupation data. Tags are indicated by the double braces, or mustaches, that surround them. Now, let’s take a look at how the render() method works.

    Rendering Mustache Templates

    The following code shows the implementation of the render() function inside the mustache.js file. Three parameters can be passed to render() . The first two parameters, template and view are mandatory. partials can be considered as dynamic templates which you can inject into your main template. In our previous example, we passed the template as an inline parameter and the view as the second parameter, and assigned the result to the output variable.


    This is the most basic form of templating with mustache. Let’s see the other methods available for creating more organized code.

    Defining Mustache Templates

    There are various methods for defining mustache templates in your application. These methods are similar to including CSS using inline styles, inline stylesheets, and external stylesheets. The example we discussed earlier can be considered as an inline method since we are passing the template directly to the function. This method prevents the possibility of reusable templates. Let’s see how we can define templates as inline script templates as opposed to directly passing to the function.

    Templates as Inline Scripts

    We can define template data inside of a

    You can include as many templates in a document as you wish with different IDs. When you want to use the template, get the HTML inside the script tag using innerHTML , and pass it as a template. Our first example will change to the following code.

    As you can see, templates are stored separately and used dynamically when required. This method increases the possibility of reusing templates. However, using inline scripts limits the templates’ scope to a single page. If you have multiple pages, you have to define your templates again. So, including templates in an external file will be the ideal solution – just like with CSS.

    Templates as External HTML Snippets

    In this technique we are going to use jQuery to implement templating. jQuery provides a function called load() , which can be used to fetch part of an external document. We are going to use this method to load templates dynamically from our external templates files. The load() function executes scripts instead of returning them, so we cannot create templates inside of script tags as we did in the previous method. The following example shows the external template files we are going to use.

    jQuery inserts the returned document into an HTML element instead of assigning it to a variable. So, we need a dummy container to keep the templates. I have used the templates container which is hidden by default. The example above retrieves template1 , and loads it. Then, we can get the template from the dummy container and pass it to mustache for rendering. This is how the external method works. We can also get the data from a server using an AJAX request.

    Conclusion

    Template engines and frameworks are important in managing complex systems with dynamically changing presentation views. Mustache.js is one of the best choices for managing templates on the client side. We started this tutorial by explaining why templates are important. Then, we moved onto various techniques of using mustache templates. Now you will be able to choose the method of implementing mustache templates in your projects.

    We have completed exploring various techniques for using mustache templates, but mustache also comes with tags such as variables, sections, functions and partials, which are used to manage complex templates. Discussing the syntax of each tag is beyond the scope of this tutorial. You can find a comprehensive guide to mustache tags on the mustache GitHub page.

    Mustache.js – обзор, начало работы, разработка HTML шаблонов с mustache

    You are using an outdated browser. Please upgrade your browser.

    By signing up, you agree to our Terms of Service and Privacy Policy.

    Данная статья – обзор шаблонизаторов для фронтенд разработки. Если Вы работаете с JS, отличным и подходящим выбором являются шаблонизаторы, так как они дают возможность писать более чистый базовый код и упрощают работу с приложениями. Рассмотрим наиболее популярные шаблонизаторы JS, которые нам предлагает Википедия. Для того, чтобы качественно работать с данными шаблонизаторами, нужно иметь хорошое понимание языка и достаточное количество навыков в этой сфере.

    ICanHaz.js – довольно простая и легкая библиотека, чтобы работать с шаблонами Mustache. С ним можно определять фрагменты шаблонов в тегах скриптов с type=”text/html” и вызывать их через id, с валидацией.

    Mustache.js – очень популярный шаблонизатор в данной области применения. Он предоставляет решения для серверной и клиентской стороны, поэтому вам не нужно будет беспокоиться о использовании нескольких шаблонизаторов. Имеет хорошую и понятную документацию, а также большое сообщество. В шаблонах использует данных JSON формата. Отлично запускается на популярных языках программирования. Последнюю версию библиотеки можно скачать с офицальной страницы .

    Handlebars – расширение для Mustache и полностью с ним совместимо. Имеет большую скорость исполнения, так как не перегружен лишней логикой. HTML по тому же принципу генерируется из данных в формате JSON. Существенный недостаток – большой вес библиотеки.

    Underscore.js – удобный и практичный инструмент для работы с jQuery. Имеет больше 60 функциональных утилит. Данный шаблонизатор усиляет функциональность jQuery при работе с массивами, функциями, объектами, коллекциями и т.д. 5 альтернатив jQuery UI тут .

    Hogan.js – шаблонизатор, который разработала компания Twitter. Его используют в качестве компоновщика промежуточных шаблонов для их быстрой динамической обработки веб-браузером. В основу разработки данного шаблонизатора был положен Mustache, но Hogan.js работает намного быстрее. Для доступа к функциям парсера предлагается API. Сканирование шаблонов и парсинг исполняются отдельными методами, в результате чего шаблоны могут заранее обрабатываться на сервере, а на клиентской стороне использоваться в Javascript-виде.

    Jade.js – используют для работы с серверными шаблонами Node.js , но в общем применим и для других целей. Имеет высокую читабельность кода и хорошую безопасность. Функционирует из части клиента, есть возможность с помощью утилиты компилировать html-шаблоны из командной строки. Шаблонизатор переименован в Pug.js, но по старому названию можно найти большое количество документации и полезной информации для разработчика.

    Шаблонизатор ECT разработан для повышения скорости. В его основе шаблонизатор Coffeescript. Имеет хорошую совместимость с Node.js и довольно простой синтаксис. Можно также ознакомиться с предварительными тестами, которые показывают производительность данной библиотеки.

    Компания Hyper Host™ желает Вам приятной работы в мире JS и готова разместить Ваши замечательные проекты на нашем хостинге !

    Mustache — шаблонизатор для JavaScript

    Mustache — шаблонизатор, который содержит минимум управляющей логики и доступен для разных языков программирования. Его можно использовать и на сервере (PHP, Ruby и т.д.), и на клиенте (Javascript).

    Если вы динамически подгружали с сервера блоки HTML-кода, а не структурированные данные только потому, что не хотели дублировать рендеринг на сервере и на клиенте, то Mustache поможет этого избежать.

    Шаблон пишется на простом языке, состоящем из нескольких типов тегов. Теги обрамляются двумя или тремя фигурными скобками с каждой стороны. Можно использовать вложенные шаблоны.

    Рассмотрим простой пример шаблона:

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

    Чтобы «запустить» шаблонизатор и отрисовать с помощью шаблона данные, необходимо подключить библиотеку:

    И вызывать рендеринг методом to_html :

    Здесь первым параметром передается шаблон, а вторым — данные. Так же можно использовать третий параметр —список дополнительных шаблонов, и четвертый — функцию callback, которая вызывается после обработки шаблона.

    Более подробно о тегах


    Всего в Mustache четыре основных типа тегов: переменная, секция, комментарий и подключение дополнительного шаблона.

    Переменная выводит данные с экранированием HTML-сущностей <

    > и без экранирования <<>> . Отличаются они количеством скобок. В нашем случае, вместо <
    > подставится строчка «Новый пост».

    Секция представляет собой парный тег. Принцип ее действия зависит от типа данных, с которыми она работает. Если в контексте имени секции соответствует поле со списком, то шаблонизатор проходит по его элементам и текст внутри парного тега обрабатывается по одному разу для каждого элемента списка. Элемент списка подставляется заместо тега-точки. Так, например, секция <<#authors>>

  • <<.>><> превратится в
  • alex
  • daemon
  • john . Если список пуст, то обрабатывается содержимое «тега с крышечкой», в нашем случае — это <<^authors>> … <> .

    Если имени секции соответствует функция, то для подстановки будет использован результат ее выполнения.

    Если поле, соответствующее имени секции, не является ни списком, ни функцией, то оно будет использоваться в качестве контекста для обработки содержимого тега.

    Комментарий оформляется в виде тега с восклицательным знаком, например, <> .

    Подключение дополнительного шаблона вызывается с помощью тега с угловой скобкой. Например, <<>copyright>> . Если в текущем контексте присутствует поле с таким названием, то оно будет передано в качестве контекста для подключаемого шаблона.

    Производительность

    Вопросы производительности Javascript шаблонизаторов рассматриваются в этой статье. Автор провел тестирование восьми шаблонизаторов и выяснил, что на простых шаблонах Mustache показывается лучшую производительность.

    Как отлаживать шаблон Mustache js?

    Я использую mustache.js для рендеринга клиента. Я определил tempalte script и передал объект модели (массив). Иногда я не вижу значения объектов в пользовательском интерфейсе. Как отладить это.

    Я повторяю «модули» и создаю строку таблицы. В некоторых случаях GUI становится пустым, но на самом деле у модели есть данные. В этом случае я хочу отлаживать здесь. Как отладить этот шаблон.

    Шаблон, который вы предоставляете, довольно прост, в нем нет ничего плохого. Вы также указываете, что он работает в некоторых случаях, что указывает на то, что сам шаблон не является проблемой.

    Из информации, которую вы предоставляете, мы не можем много сделать для отладки, кроме как проверить, что шаблон работает с Mustache.js , создавая некоторые фиктивные данные, которые соответствуют шаблону:

    Это прекрасно работает, что говорит о том, что проблема в другом месте, возможно, что некоторые из данных в фактически предоставленном массиве modules отличаются от того, что ожидает шаблон.

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

    Некоторые возможные догадки о том, что может вызвать сбой (только спекуляция, необходимо протестировать против фактически неудачных случаев):

    Обзор шаблонизаторов JavaScript

    Шаблонизаторы являются отличным инструментом для создания веб-приложений с более чистым и простым кодом. Ниже представлены наиболее популярные шаблонизаторы JavaScript.

    Mustache.JS

    Mustache.JS — это логический шаблонный синтаксис. Его можно использовать для HTML, конфигурационных файлов, исходного кода — чего угодно. Он работает путем расширения тегов в шаблоне, используя значения, предоставленные в хэше или объекте.

    Transparency

    Transparency — это минимальный шаблонизатор для jQuery. Он отображает объекты JSON на элементы DOM с нулевой конфигурацией. Просто вызовите .render().

    Hogan.js

    Hogan.js — это шаблонизатор JS 3.4k, разработанный в Twitter. Используйте его как часть вашего упаковщика ресурсов для предварительной компиляции шаблонов или включите его в браузер для обработки динамических шаблонов. Если вы разрабатываете с Node.js, просто используйте NPM, чтобы добавить пакет Hogan.

    HandlebarsJS

    HandlebarsJS — обеспечивает необходимую мощность, позволяющую эффективно создавать семантические шаблоны без каких-либо разочарований. Handlebars в значительной степени совместим с шаблонами Mustache. В большинстве случаев можно поменять Mustache с помощью Handlebars и продолжить использовать текущие шаблоны.

    Jade Language

    Jade — это движок HTML шаблонов, в основном используемый для серверных шаблонов в NodeJS.

    Nunjucks

    Nunjucks — это богатый и мощный язык шаблонов с наследованием блоков, автоэкранированием, макросами, асинхронным управлением и многим другим.

    Илон Маск рекомендует:  Что такое код stripcslashes
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL