Синтаксис шаблонов довольно функционален. В теле шаблона разработчик может обращаться к полям объекта, к полям полей объекта, вызывать методы объекта и его полей, обращаться к внешним объектам JavaScript и jQuery, просто писать JS-выражения. Кроме всего этого внутри шаблона можно итеративно выводить коллекции, организовать условный вывод, использовать вложенные шаблоны. Но давайте обо всём по порядку.

Примеры в статье

Все примеры я буду приводить ключевыми кусками, чтобы не загромождать материал повторяющимися частями кода. В примере будут присутствовать текст шаблона, JSON данных, при необходимости JSON опций (параметр options метода .tmpl( ) ) и результат. В общем случае полный код примера будет выглядеть так:

<script type="text/x-jquery-tmpl">
    <li> ЭТО ТЕКСТ ШАБЛОНА </li>
</script>
<script type="text/javascript">
var data = [
    // ЭТО МАССИВ ДАННЫХ
];
var options = {
    // ЭТО ОПЦИИ
};
$(function() {
    // ПРИМЕНЕНИЕ ШАБЛОНА И ВЫВОД РЕЗУЛЬТАТА:
    $('script[type="text/x-jquery-tmpl"]').tmpl(data, options).appendTo($('.output').empty());
});
</script>
<ul class="output"></ul>

Так будет полностью выглядеть приведенный ниже пример 1.:

<script type="text/x-jquery-tmpl">
    <li>${Name} ({{html Desc}}); вычисления: ${p1 + p2 + 10}</li>
</script>
<script type="text/javascript">
var data = [
    { Name: "obj1", Desc: "<em>Object one</em>", p1: 1, p2: 10 },
    { Name: "<em>obj2</em>", Desc: "<strong>Object two</strong>", p1: 3.3, p2: 5 }
];
var options = {
};
$(function() {
    $('script[type="text/x-jquery-tmpl"]').tmpl(data, options).appendTo($('.output').empty());
});
</script>
<ul class="output"></ul>

Вставка данных в шаблон ${}, {{= }}, {{html }}

С помощью этих инструкции можно вставить в шаблон значение поля объекта данных, результат работы метода или результат вычисления некоторого js-выражения, внутри инструкции можно обращаться к глобальным объектам JS, а также к служебным объектам, созданным при обработке шаблона.

Прежде чем перейти к примерам, хочу немного акцентировать внимание на сходстве и разнице этих инструкций. Все три инструкции предназначены для вывода результата в эту точку шаблона. ${expression} и {{= expression}} эквивалентны (первая инструкция – это сокращённая форма второй), результат вставляется в шаблон в виде текста, если в тексте встречаются символы разметки (<  >  & и пр.), то они будут заменены на соответствующие спецсимволы (&lt;  &gt;  &amp; и пр.). Для вставки же разметки с сохранением html-кода нужно использовать инструкцию {{html expression}}.

Пример 1. Вывод данных с разметкой и без

Шаблон:

<li>${Name} ({{html Desc}}); вычисления: ${p1 + p2 + 10}</li>

Данные:

[
    { Name: "obj1", Desc: "<em>Object one</em>", p1: 1, p2: 10 },
    { Name: "<em>obj2</em>", Desc: "<strong>Object two</strong>", p1: 3.3, p2: 5 }
]

Результат:

<ul class="output">
    <li>obj1 (<em>Object one</em>); вычисления: 21</li>
    <li>&lt;em&gt;obj2&lt;/em&gt; (<strong>Object two</strong>); вычисления: 18.3</li>
</ul>

Доступ к объектам и внутренние параметры шаблона

Как я уже упоминал, внутри выражения можно обращаться к глобальным объектам и функциям JS, при этом шаблонизатор сам пытается определить, является указанное имя ссылкой на глобальный объект или на часть переданных данных. И конечно же, локальные данные имеют более высокий приоритет, чем глобальные. Давайте определим в документе глобальные объект testObj и функцию testFunc и попробуем их использовать:

var testObj = {
    Value: 1
};

function testFunc(i) {
    return i % 2 == 1;
}

Пример 2. Использование глобальных объектов

Шаблон:

<li>${Name}; testObj.Value = ${testObj.Value}; testFunc(${p}) => ${testFunc(p)}</li>

Данные:

[
    { Name: "obj1", p: 3, testObj: { Value: 20 } },
    { Name: "obj2", p: 13, testFunc: function(i) { return i + 7; } }
]

Результат:

<ul class="output">
    <li>obj1; testObj.Value = 20; testFunc(3) =&gt; true</li>
    <li>obj2; testObj.Value = 1; testFunc(13) =&gt; 20</li>
</ul>

Внутри шаблона есть ещё доступ  к специальным объектам – внутренним параметрам шаблона: $item и $data.

$item – представляет доступ к обрабатываемой в данный момент единице данных для вставки в шаблон, внутри этого объекта собраны и параметры, переданные пользователем, и дополнительные параметры из аргумента options функции .tmpl( ). Доступ к параметрам из данных осуществляется через вложенный объект .data, а к параметрам аргумента options – напрямую, т.е. если вызвать $(‘#myTmpl’).tmpl({ p1: 1 }, { p2: 2 }), то в шаблоне получить доступ к ним можно так: $item.data.p1 и $item.p2.

$data – это сокращённая версия доступа к данным, по сути это просто синоним для $item.data, в свете этого доступ в шаблоне к p1 и p2 из вызова в абзаце выше может быть таким: $data.p1 и $item.p2.

Пример 3. Параметр options

Шаблон:

<li>${Name}; p * 100 = ${$item.Method($data.p)}</li>

Данные:

[
    { Name: "obj1", p: 3.3 },
    { Name: "obj2", p: 0.13 }
]

Опции:

{ Method: function(i) { return i * 100; } }

Результат:

<ul class="output">
    <li>obj1; p * 100 = 330</li>
    <li>obj2; p * 100 = 13</li>
</ul>

Условная разметка в шаблоне {{if }} {{else}} {{/if}}

Внутри шаблона можно отслеживать некие условия и в зависимости от них выводить тот или иной кусок. Для достижения этих целей применяются следующие комбинации инструкций:

{{if expression}} tmplPart {{/if}} – простой вывод части шаблона, только если выражение истинно,
{{if expression}} tmplPart1 {{else}} tmplPart2 {{/if}} – вывод части 1 или 2 в зависимости от истинности выражения,
{{if expr1}} tmplPart1 {{else expr2}} tmplPart2 {{else}} tmplPart3 {{/if}} – это уже построение цепочки последовательных проверок (if .. else if .. else if .. else ..), понятное дело, что последний else без выражения необязателен. Думаю, тут всё понятно, давайте посмотрим простенький пример:

Пример 4. Условный вывод

Шаблон:

<li>
{{if (
    (typeof(useFirstLastName) != "undefined" ? useFirstLastName : $item.defaultUseFirstLastName) &&
    $data.FirstName && $data.LastName)}} ${FirstName + " " + LastName}
{{else $data.FullName}} ${FullName}
{{else $data.Name}} ${Name}
{{else}} ${$item.NoName}
{{/if}}
</li>

Данные:

[
    { Name: "obj1", FullName: "Object 1", FirstName: "Object", LastName: "One" },
    { FirstName: "Object", LastName: "Two", Name: "obj2", useFirstLastName: true },
    { Title: "object number 3" }
]

Опции:

{ NoName: "[noname]", defaultUseFirstLastName: false }

Результат:

<ul class="output">
    <li>  Object 1  </li>
    <li>  Object Two  </li>
    <li>  [noname]  </li>
</ul>

Поясню, что происходит в шаблоне. Под первым условием мы проверяем, нужно ли выводить имя объекта в виде конкатенации FirstName и LastName – при этом проверяется условие внутри объекта, если оно не определено, то условие в опциях, и требуется наличие обоих свойств. Обращаясь в условии к этим свойствам через параметр $data, гарантируем их наличие именно в переданных данных, а глобальные объекты при этом игнорируются. Во втором и третьем условиях проверяем последовательно свойства FullName и Name – выводим первое попавшееся, если нет ни одного из них, то выводим «заглушку» из опций.

Итеративный обход с помощью {{each }}

Думаю всем знакома функция jQuery .each(func) (а есть ещё и $.map(array, callback) ) и надеюсь многим знакома конструкция JS for (var key in obj) – эти выражения совершают итеративный обход элементов коллекции. В шаблонах тоже возможен вывод коллекций поэлементно и описывается он следующей инструкцией: {{each( index, value ) data}} tmplText {{/each}}. index и value – это имена параметров (указываются без кавычек) для доступа соответственно к текущему индексу и значению в коллекции. Есть и сокращённая форма этой инструкции: {{each data}} tmplText {{/each}} – при этом в тексте шаблона к текущим индексу и значению можно обратиться по именам по умолчанию: $index и $value. Выражение data должно возвращать в результате массив или объект, объект будет обработан как словарь (коллекция пар имя-значение свойств объекта). Довольно слов, посмотрим на примере:

Пример 5. Вывод массива

Шаблон:

<li>
    <table border="1" cellpadding="5" cellspacing="0">
        <tr><th align="left">n</th><th align="left">${Expr}</th></tr>
        {{each NumCollection}}
        <tr><td>${$index}</td><td>${$value}</td></tr>
        {{/each}}
        <tr><td>${$item.EtcName}</td><td>${$item.EtcVal}</td></tr>
    </table>
</li>

Данные:

[
    { Expr: "2^n", NumCollection: [ 1, 2, 4, 8, 16 ] },
    { Expr: "2n-1", NumCollection: [ 1, 3, 5, 7, 9 ] },
]

Опции:

{ EtcName: "etc.", EtcVal: "..." }

Результат:

<ul class="output">
<li>
     <table border="1" cellpadding="5" cellspacing="0">
         <tbody>
             <tr><th align="left">n</th><th align="left">2^n</th></tr>
             <tr><td>0</td><td>1</td></tr>
             <tr><td>1</td><td>2</td></tr>
             <tr><td>2</td><td>4</td></tr>
             <tr><td>3</td><td>8</td></tr>
             <tr><td>4</td><td>16</td></tr>
             <tr><td>etc.</td><td>...</td></tr>
         </tbody>
    </table>
</li><li>
     <table border="1" cellpadding="5" cellspacing="0">
         <tbody>
             <tr><th align="left">n</th><th align="left">2n-1</th></tr>
             <tr><td>0</td><td>1</td></tr>
             <tr><td>1</td><td>3</td></tr>
             <tr><td>2</td><td>5</td></tr>
             <tr><td>3</td><td>7</td></tr>
             <tr><td>4</td><td>9</td></tr>
             <tr><td>etc.</td><td>...</td></tr>
        </tbody>
    </table>
</li>
</ul>

Пример 6. Вывод объекта-словаря

Шаблон:

<li>
JSON = { {{each(key, val) $data}}{{if $item.f}},{{/if}} "${key}": "${val}"{{if $item.f=true}}{{/if}}{{/each}} }
</li>

Данные:

[
    { Name: "obj1", FullName: "Object 1", FirstName: "Object", LastName: "One" },
    { FirstName: "Object", LastName: "Two", Name: "obj2" },
    { Title: "object number 3" }
]

Опции:

{ f: false }

Результат:

<ul class="output">
    <li> JSON = {  "Name": "obj1", "FullName": "Object 1", "FirstName": "Object", "LastName": "One" } </li>
    <li> JSON = {  "FirstName": "Object", "LastName": "Two", "Name": "obj2" } </li>
    <li> JSON = {  "Title": "object number 3" } </li>
</ul>

Вывод шаблона в шаблоне {{tmpl }}

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

Полный вид инструкции: {{tmpl(data, options) template}}.

(На момент написания статьи в оф.документации показана сигнатура инструкции {{tmpl( [data], [options] ) template}} content {{/tmpl}} – это ОШИБКА, у этой инструкции нет закрывающего тега {{/tmpl}} и, соответственно, никакого содержания content)

Параметры data и options – являются необязательными и имеют то же назначение, что и в функции .tmpl(data, options), если параметры опущены, то в качестве данных используется текущий объект данных $data, а options – пустой объект.
Параметр template может принимать следующие значения: HTML-разметка, HTML- или jQuery-объект, строка, которая является именем скомпилированного шаблона или скомпилированный шаблон, также можно просто передать строку-селектор для jQuery (это недокументированная возможность, но она фигурирует в примерах).

Пример 7. Использование сгенерированного шаблона

Шаблон:

<li> {{tmpl $item.lt+tag+$item.gt+$item.tp+"{content}"+$item.lt+"/"+tag+$item.gt}} </li>

Данные:

[
    { tag: "strong", content: "<em>Hello</em>, " },
    { tag: "em", content: "World!" }
]

Опции:

{ lt: "<", gt: ">", tp: "$" }

Результат:

<ul class="output">
    <li> <strong>&lt;em&gt;Hello&lt;/em&gt;, </strong> </li>
    <li> <em>World!</em> </li>
</ul>

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

Пример 8. Использование шаблона внутри шаблона

Шаблон:

<li>${Name} {{if Items}}<ul>{{tmpl(Items) '#tmplSelector'}}</ul>{{/if}}</li>

Тут строку ‘#tmplSelector’ – следует заменить на корректный селектор (или функцию) получения текущего шаблона. Для моих «живых» примеров можно использовать такой шаблон:

<li>${Name} {{if Items}}<ul>{{tmpl(Items) $('#example8 script[type="text/x-jquery-tmpl"]')}}</ul>{{/if}}</li>

, в нём будет применен начальный шаблон, или

<li>${Name} {{if Items}}<ul>{{tmpl(Items) $('#example8')[0].DemoData.Tmpl}}</ul>{{/if}}</li>

, в нём будет применён отредактированный шаблон – полностью «живой» пример.

Данные:

[
    { Name: "obj1", Items: [ { Name: "obj11", Items: [ { Name: "obj111" }, { Name: "obj112" } ] }, { Name: "obj12" } ] },
    { Name: "obj2" }
]

Опции:

{ }

Результат:

<ul class="output">
    <li>obj1 <ul>
        <li>obj11 <ul>
            <li>obj111 </li>
            <li>obj112 </li>
        </ul></li>
        <li>obj12 </li>
    </ul></li>
    <li>obj2 </li>
</ul>

В этом примере определён рекурсивный шаблон.

Шаблон в шаблоне с HTML-содержанием внутри {{wrap }}

{{wrap (data, options) template}} HTMLcontent {{/wrap}} – эта инструкция очень похожа на инструкцию {{tmpl }}, её параметры data, options и template имеют то же назначение. Отличие инструкции {{wrap }} от {{tmpl }} в том, что она может включать HTML-содержание и затем это содержание можно использовать в применяемом шаблоне.

В шаблоне, который передаётся параметром template, можно достать HTML-разметку, заключённую между {{wrap }} и {{/wrap}} с помощью метода $item.html(filter, onlyText). Первым аргументом можно наложить фильтр в виде селектора jQuery на выбираемые из разметки элементы, а вторым аргументом можно указать, что нужно в результате получить только текст верхнего выбранного элемента.

Пример 9. Использование {{wrap }}

<!DOCTYPE html>
<html>
<head>
  <style>
table { border-collapse:collapse; width:380px; background-color:#f8f8f8; border:2px solid blue; margin:5px; } table td { border:1px solid blue; padding:3px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="myTmpl" type="text/x-jquery-tmpl">
    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        <h3>One</h3>
        <div>
            First <b>content</b>
        </div>
        <h3>Two</h3>
        <div>
            And <em>more</em> <b>content</b>...
        </div>
    {{/wrap}}

    And this wraps different HTML content:
    {{wrap "#tableWrapper"}}
        <div>
            First <b>div</b>
        </div>
        <div>
            Second <b>div</b>
        </div>
        <div>
            Third <b>div</b>
        </div>
        <h3>first h3</h3>
        <h3>second h3</h3>
        <h3>third h3</h3>
    {{/wrap}}
</script>

<script id="tableWrapper" type="text/x-jquery-tmpl">
    <table><tbody>
        <tr>
            {{each $item.html("h3", true)}}
                <td>
                    ${$value}
                </td>
            {{/each}}
        </tr>
        <tr>
            {{each $item.html("div")}}
                <td>
                    {{html $value}}
                </td>
            {{/each}}
        </tr>
    </tbody></table>
</script>

<div id="myWrappedView"></div>

<script>
$( "#myTmpl" ).tmpl()
    .appendTo( "#myWrappedView" );
</script>

</body>
</html>

Этот пример взят со страницы оф. документации по этой инструкции шаблона. В «живых» примерах приведена переработанная под их специфику версия.

Комментарии в шаблонах {{! }}

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

{{! это текст комментария}}

«Живые» примеры из статьи

По этому адресу страница доступна online: http://zalab.net/projects/jquery/demo/tmpl/
А по этой ссылке можно загрузить эту страничку в архиве: jq.tmpl.live.examples.zip (33 KB)

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

Следует отметить, что команда Microsoft использовала свои немалые наработки в этих направлениях, как и команда проекта jQuery, и при хорошо сложившемся взаимодействии получились, на мой взгляд, отличные инструменты для разработчиков. В подтверждение моего мнения могу добавить, что разработчики jQuery анонсировали включение плагинов шаблонов и привязки данных в ядро библиотеки jQuery уже версии 1.5, а плагина глобализации – в соответствующую версию jQuery UI. Плагины пока ещё не получили статус релиза, но уже активно ведется написание документации на сайте http://api.jquery.com. К слову, команда Microsoft последовала традициям разработки jQuery и разместила материалы по разработке плагинов на github.com, где доступны описание и исходники плагинов.

В этой статье я расскажу немного о плагине шаблонов.

jQuery Templates plugin

Начнём с простенького примера:

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  { Name: "The Inheritance", ReleaseYear: "1976" }
];

$( "#movieTemplate" ).tmpl( movies )
    .appendTo( "#movieList" );
</script>

<ul id="movieList"></ul>

Итак, в примере разработчик страницы описал шаблон для вывода объектов в виде разметки (первый элемент script), потом получил откуда-то массив объектов movies и вызвал инструкцию сгенерировать нужную разметку по шаблону, взяв данные из предоставленного массива объектов, а результат добавить в конец списка #movieList.
В результате работы плагина мы получим такую разметку:

<ul id="movieList">
  <li><b>The Red Violin</b> (1998)</li>
  <li><b>Eyes Wide Shut</b> (1999)</li>
  <li><b>The Inheritance</b> (1976)</li>
</ul>

А теперь по сути вопроса.
Что делает плагин?
Плагин получает на вход строку шаблона и множество объектов (или один объект), которые нужно вывести в строку (или разметку) с форматированием.
Где это применяется?
В основном этот плагин полезен при динамическом выводе объектов JS на страницу, объекты могут быть получены самыми разными способами, например, при разчётах или по результатам каких-то действий пользователя и, конечно самый часто приводимый пример, в виде JSON в ответе сервера на AJAX запрос.

Методы плагина

.tmpl( [ data ], [ options ] )
Получает содержимое первого выбранного элемента и использует его в качестве шаблона для форматированного вывода указанных данных.
data – данные для вывода в шаблон (объект или массив объектов).
options – опционально, определённое пользователем расширение в виде пар ключ-значение для объекта вывода в шаблон.
jQuery.tmpl(template, [ data ], [ options ])
Использует указанный шаблон для форматированного вывода указанных данных.
template – шаблон для форматирования данных, может быть одного из следующих типов: строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке), строка, соответствующая имени ранее скомпилированного шаблона.
data, options – имеют то же значение, что и выше
.tmplItem()
Возвращает для первого выбранного элемента структуру (объект) с результатами работы шаблонизатора. Возвращаемый методом объект обеспечивает доступ к:

• HTML-частям, из которых состоит шаблон
• ассоциированной единице переданных данных
• родительскому шаблону, если текущий шаблон является вложенным
• текущему шаблону, использованному для вывода
• определённому пользователем расширению (полям и методам), переданным в параметр options метода tmpl()

Этот метод используется, напрмер, когда после проведенного форматирования данных требуется узнать, а какие же данные были использованы при формировании некоторого куска разметки, или для обновления куска разметки с использованием новых данных.
jQuery.tmplItem( element )
Аналогичен методу .tmplItem, только структура с результатами работы шаблонизатора ищется для элемента element (HTML-элемент, в том числе и в jQuery-обёртке).
.template( [ name ] )
Метод делает из содержимого первого выбранного элемента скомпилированную версию шаблона форматирования.
name – необязательно имя шаблона, если имя указано, то потом можно использовать его для обращения к этому шаблону в методе jQuery.tmpl(name, data, options)
jQuery.template( [ name, ] template )
Метод аналогичен описанному выше, только здесь шаблон передаётся в качестве параметра template – это может быть строка, строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке).

Синтаксис шаблона

Я вкратце приведу описание нескольких самых основных элементов шаблона, остальное надеюсь более подробно описать в следующей статье (если будет положительный отклик на эту статью)
${fieldNameOrExpression} и {{= fieldNameOrExpression}}
Позволяет вставить в шаблон значение поля (свойства) объекта данных, может быть также использовано для вставки результата метода или js-выражения. Напрмер, «${Name}» – вставит в шаблон значение поля obj.Name, а при том, что Languages – это поле объекта, которому присвоен массив, «${Languages.length}» – вставит в шаблон длину этого массива, и наконец, если у объекта есть метод getLanguages с двумя параметрами, то «${getLanguages(Languages, ‘ – ‘)}» – вставит в шаблон результат работы этого метода.
{{html fieldNameOrExpression}}
Элемент шаблона ${field} (или {{= field}}) вставляет в результат значение указанного поля в виде текста, т.е. если в строке будут HTML-теги, то они будут закодированы, а не преобразованы в разметку. Если вам требуется вставить данные в шаблон именно в виде HTML-разметки, то надо использовать синтаксис {{html <что нужно вставить>}}.
Для начала работы с плагином уже достаточно рассказано, могу лишь добавить, что синтаксис шаблонов позволяет вставлять вложенные шаблоны, условные инструкции, обращаться к некоторым объектам JS и jQuery и ещё кое-что… Остальное – материал будущей статьи.

Источники

Статья написана по материалам, найденным во всемирной паутине. В основном это перевод официальной документации. Оригиналы можно посмотреть по следующим ссылкам:

• Сообщение в блоге jQuery и в блогах MS
• Страница документации плагина (примеры взяты оттуда)

Об авторе

Зовут меня Зайцев Андрей, мой маленький блог, профиль на форуме zandroid

Это моя первая статья в этом блоге, надеюсь, и не последняя  Большое спасибо Геннадию за возможность публикации и за полезные советы по написанию и оформлению материала.

Примеры

Пример 1: Динамическое переключение применяемого шаблона

<!DOCTYPE html>
<html>
<head>
  <style>
    table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; }
    table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } table td { padding:3px; } table tr:hover { color:red; }
    .movieDetail { background-color:yellow; } .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="summaryTemplate" type="text/x-jquery-tmpl">
  <tr class='movieSummary'><td colspan='2'>${Name}</td></tr>
</script>

<script id="detailTemplate" type="text/x-jquery-tmpl">
  <tr class='movieDetail row1'><td colspan='2'>${Name}</td></tr><tr class='movieDetail row2'><td>${ReleaseYear}</td><td>Director: ${Director}</td></tr>
</script>

Click for details:
<table><tbody id="movieList"></tbody></table>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
var selectedItem = null;

/* Render the summaryTemplate with the "movies" data */
$( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" );

/* Add onclick handlers for movie template items
using the summary or details template */
$("#movieList")
  .delegate( ".movieSummary", "click", function () {
    if (selectedItem) {
      // Set the template on the previously selected item
      // back to the summary template
      selectedItem.tmpl = $( "#summaryTemplate" ).template();
      selectedItem.update();
    }
    /* Get the data structure for the template item
       which this clicked element belongs to, and make
       it the selected item */
    selectedItem = $.tmplItem(this);

    /* Set the template on this item to the detail template */
    selectedItem.tmpl = $( "#detailTemplate" ).template();
    selectedItem.update();
  })
  .delegate( ".movieDetail", "click", function () {
    /* Set the template on this item to the summary template */
    selectedItem.tmpl = $( "#summaryTemplate" ).template();
    selectedItem.update();
    selectedItem = null;
  });
</script>

</body>
</html>

Довольно сложный и объемный, в нём используются сразу несколько методов плагина, взят с этой страницы.

Пример 2: Вставка данных с разметкой в шаблон

<!DOCTYPE html>
<html>
<head>
  <style>
    .role {font-weight:bold;font-style: italic;} #movieContainer {padding-left: 8px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <h4>${Name}</h4>
  <p>{{html Synopsis}}</p>
</script>

<div id="movieContainer"></div>

<script>
/* The Synopsis data field contains HTML markup. */
var movie = {
  Name: "Meet Joe Black",
  Synopsis: "The <span class='role'>grim reaper</span> (<a href='http://www.netflix.com/RoleDisplay/Brad_Pitt/73919'>Brad Pitt</a>) visits <span class='role'>Bill Parrish</span> (<a href='http://www.netflix.com/RoleDisplay/Anthony_Hopkins/43014'>Anthony Hopkins</a>)..."
};

/* Render the template with the movie data.
   The template uses the {{html}} template tag
   to  insert the Synopsis HTML markup data. */
$( "#movieTemplate" ).tmpl( movie )
  .appendTo( "#movieContainer" );
</script>

</body>
</html>

В этом примере в шаблон добавляются как простые строковые значения полей, так и значения с разметкой, взято вот с этой страницы.

P.S.

Примеры не стал расписывать, если аудитория поддержит мои начинания, то можно пошагово расписать что, как и почему, и привести ещё несколько примерчиков.

Вопросы по плагину прошу задавать на форуме, если есть комменты именно по статье – то комментируйте ниже.

Это мой уважаемый коллега, человек с большим опытом разработки сложных приложений, в прошлом один из разработчиков javascript-фреймворка Dojo Toolkit.

» Профессиональное javascript-программирование
» Сложный AJAX и COMET: тонкости Web 2.0
» Мастер-класс по клиентской оптимизации
» Секреты jQuery

Такие мастер-классы помогут узнать много нового, понять уровень своих знаний, получить новые идеи.

И еще, очень интересно! Принять участие в мастер-классе «Секреты jQuery» можно будет в режиме on-line.

Исходное объявление на javascript.ru »

Для понимания материала необходимо знать javascript на минимальном уровне, писать простые скрипты. Содержание мастер-классов построено так, чтобы максимально глубоко раскрыть темы за короткий срок.

Теперь подробнее о содержании мастер-классов.

«Профессиональное javascript-программирование»

- Javascript, browser tips & tricks.
- Фишки DOM, функции/замыкания, ООП – понятно и в деталях.
- Малоизвестные возможности javascript и браузеров.
- Javascript-фреймворки. Сравнение современных возможностей. jQuery в деталях.
- Полезный инструментарий, который сделает вашу разработку быстрее и качественнее. Гораздо больше, чем Firebug.
- Обмен информацией между окнами с разных доменов
- HTML5: что уже есть, а что нас ждет уже скоро.

Этот мастер класс – отнюдь не об основах javascript, здесь присутствует много информации для профессионалов.
Москва: суббота, 20 февраля, 11.00
Санкт-Петербург: суббота, 27 февраля, 11.00
Продолжительность – 4 часа.

«Клиентская оптимизация»

- Способы и принципы сжатия javascript, что делать, чтобы код сжимался эффективнее.
- Идеальное кеширование. Скрипты и серверная часть.
- Эффективная оптимизация javascript. Подходы, цифры, рецепты.
- Основные приемы оптимизации jQuery.
- Ускорение загрузки страницы через HTTP pipelining.
- Оптимизация с Google Gears и HTML5.
- Google Closure Compiler в деталях
- Удобные инструменты для оптимизации и профайлинга.

Про то, как ускорить страницу, почти ничего не делая, и как серьезно ускорить страницу и сайт, если что-то сделать.
Москва: воскресенье, 21 февраля, 11.00
Санкт-Петербург: воскресенье, 28 февраля, 11.00
Продолжительность – 4 часа.

«Сложный AJAX и COMET: тонкости Web 2.0″

- Асинхронная подгрузка событий с сервера (COMET) – различные варианты, сравнение и примеры реализации.
- Кнопки back-forward, закладки и история с AJAX.
- Cпособы написания чата/оповещающего демона, аспекты производительности и решения.
- Кросс-доменные ограничения, способы их преодоления.
- Асинхронный try..catch. Удобная работа с асинхронностью.
- Инструменты для разработки и отладки сложных AJAX-приложений.
- Специализированный COMET-сервер, установка, расширение, интеграция. Поднимем COMET прямо на мастер-классе.

Мастер-класс сделает современные подходы простыми и понятными для вас, позволит улучшить те приложения, которые есть сейчас, и перейти к качественно новой разработке в будущем.
Москва: суббота, 20 февраля, 16.00
Санкт-Петербург: суббота, 27 февраля, 16.00
Продолжительность – 4 часа.

«Секреты jQuery»

1. Как работает поисковой движок jQuery $(‘…’).
- Внутреннее устройство. Алгоритм поиска. No magic.
- Почему некоторые очевидные запросы тормозят, и как их ускорять.
- Расширение поискового движка, добавление своих фильтров.
2. Система событий в jQuery.
- Внутреннее устройство.
- Слабо- и недокументированные фичи, отсутствующие в обычных javascript-событиях.
- Влияние системы событий на быстродействие и DOM-манипуляции. Что тормозит и почему.
- Обход утечек памяти.
3. Фишки AJAX.
- Особенные фичи AJAX в jQuery, которых нет в других библиотеках и полезные приемы работы с ними.
4. $.изнутри.
- Внутреннее устройство функции $. Что она делает быстро, а что – нет.
- Создание плагинов. Внутренний механизм работы $.fn.plugin.
5. jQuery UI.
- Обзор и устройство jQuery UI.
- Написание собственных виджетов. Объявление, вызов методов и т.п. Примеры.
- Приемы для более удобной работы с виджетами.
6. Профайлинг jQuery-приложения
- Как из каши $(вызовов) получить читаемый профиль.
7. Дополнительно.
- Общий обзор библиотеки jQuery, ее сильных и слабых мест. Сравнение с другими фреймворками. Новое в jQuery 1.4.

Мастер-класс посвящен слабо документированным особенностям и устройству фреймворка jQuery. Это не вводный курс. Знакомство и опыт работы с фреймворком jQuery – обязательны.
Москва: воскресенье, 21 февраля, 16.00
Санкт-Петербург: воскресенье, 28 февраля, 16.00
Продолжительность – 3 часа.
On-line: суббота, 27 февраля, 20.00-21.50 и воскресенье, 28 февраля, 20.00-21.50

Дополнительная информация, запись на мастер-классы »

Итак, первое на чем мы остановим свое внимание – это определение и работа с функциями, с использованием подхода при котором они являются обычными объектами JavaScript. Но для того, чтобы к этому подойти, давайте сначала посмотрим, как создаются

Объекты в JavaScript

var card = new Object();

Весьма просто, но совсем неинтересно, поскольку наш объект не содержит никакой информации. Давайте исправим это:

var card = new Object();
card.firstname = 'Ivan';
card.lastname = 'Ivanov';
card.year = '1974';
card.employed = new Date(2004,1,12);

Это уже что-то полезное – создав новый экземпляр объекта, мы присвоили его переменной card и наполнили свойствами различных типов: строка, число, и дата.

Что же получается? Получается, что объект JavaScript – это набор свойств, каждое из которых состоит из имени и значения. При этом в качестве имени может выступать только строка, а вот значением (и это важный момент!!!) может быть и строка, и число, и массив, и конечно функция…

Вывод: основная цель экземпляра объекта – служить контейнером для именованных наборов других объектов.

Давайте немного усложним наш код, который мы используем в качестве примера:

var card = new Object();
card.firstname = 'Ivan';
card.lastname = 'Ivanov';
card.year = '1974';
card.employed = new Date(2004,1,12);
var phone = new Object();
phone.home = '(495)353-5353';
phone.mobile = '(903)261-1777';
card.phone = phone;

мы создали еще один объект, который содержит номера телефонов и сделали этот объект значением свойства нашего первого объекта.

А теперь попробуем записать все тоже самое в литеральной нотации, плавно двигаясь к тому синтаксису, который присутствует в jQuery-коде практически повсеместно.

var card = {
  firstname : 'Ivan',
  lastname  : 'Ivanov',
  year      : '1974',
  employed  : new Date(2004,1,12),
  phone     : {
    home   : '(495)353-5353',
    mobile : '(903)261-1777'
  }
};

Вот собственно такая форма записи и называется JSON – посмотрите, насколько проста и понятна структура:

- объект – пара фигурных скобок
- свойства перечислены внутри скобок, через запятую
- каждое свойство – это пара состоящая из имени и значения, разделенных двоеточием.

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

var someVar = 'В лесу родилась елочка!';

Простейшая инструкция, в которой переменной присваивается экземпляр объекта String. Если мы попробуем выполнить:

alert(someVar);

увидим то, что и ожидали – сенсационное сообщение о том, что в лесу родилась елочка. Как Вы думаете, что мы увидим после выполнения следующего кода?

alert(window.someVar);

Можете попробовать, но сразу скажу, что в результате получится абсолютно тоже самое сообщение! Поскольку инструкции эквивалентны, то какой же вывод из этого можно сделать?

Правильно! Когда ключевое слово var используется за пределами какой-либо функции, на глобальном уровне, оно является всего лишь ссылкой на свойство объекта window.

Ну вот, с объектами мы более-менее разобрались. Но давайте кратко сформулируем то, о чем мы говорили. Итак:

- объект в JavaScript – это неупорядоченный набор свойств;
- свойство состоит из имени и значения;
- объекты можно объявлять с помощью литералов;
- глобальные переменные – есть свойства объекта window;

Функция как объект JavaScript

Вот теперь мы готовы к тому, чтобы вернуться к тому утверждению, что функции в JavaScript можно рассматривать как обычные объекты. Почему же в JavaScript функцию можно считать обычным объектом? Давайте возьмем для сравнения объекты других типов, например String или Number.

Если объекты String или Number определяются соответствующими конструкторами, то функции также определяются конструктором, в данном случае конструктором Function. Точно также, как и другие объекты функции могут:

- присваиваться переменным и свойствам объектов
- передаваться в виде параметров
- возвращаться как результат других функций
- создаваться с использованием литералов

Но есть на первый взгляд одно очень существенное отличие от тех же упомянутых объектов String или Number – у функции есть имя! Но это только на первый взгляд.

Посмотрим простенький пример:

function hello() {
  alert('Hello, world!');
}

такая запись очень часто используется для создания глобальных функций, но это совершенно не означает, что мы только что создали функцию с именем hello. Вспомните наши примеры с ключевым словом var. Тут практически тоже самое, только в примере с функцией ключевое слово function автоматически создает экземпляр объекта и присваивает его свойству объекта window. А имя этого свойства совпадает с именем нашей функции. Т.е. мы могли бы написать так:

hello = function () {
  alert('Hello, world!');
}

или даже так:

window.hello = function () {
  alert('Hello, world!');
}

Это есть синтаксис литерала функции – привыкайте, в jQuery-коде Вы будете использовать такую форму записи очень часто. Но самый главный вывод, который мы должны сделать – экземпляры Function являются значениями!!!, которые можно присвоить переменным, свойствам или параметрам, через которые на них можно ссылаться.

Функции обратного вызова

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

function hello() {
  alert('Hello, word!');
}
setTimeout(hello,5000);

Объявляем функцию с именем hello и устанавливаем таймер на 5 секунд. Смотрите, передача функции в качестве параметра ничем не отличается от передачи любого другого значения – в первом параметре мы передали функцию, а во втором – число. Когда время таймера истечет, будет вызвана функция hello. Поскольку метод setTimeout() делает вызов функции в нашем собственном программном коде – эту функцию называют функцией обратного вызова.

Однако есть более изящный способ записи этого кода:

setTimeout(function(){ alert('Hello, word!'); },5000);

если функцию не требуется вызывать где-то в другом месте страницы, нет никакой необходимости создавать свойство hello в объекте window. Такой подход будет очень часто встречаться в программном коде jQuery.

Реализация this в JavaScript

В объектно-ориентированных языках основанных на классах, указатель this, как правило, ссылается на экземпляр класса, в пределах которого был объявлен метод. Реализация this в JavaScript отличается едва различимым, но очень существенным образом. В JavaScript, где функции являются обычными объектами (мы говорили об этом выше), они не объявляются как часть чего-либо. Объект, на который ссылается this, называется контекстом функции и определяется не тем, как функция объявляется, а тем как она вызывается. Это значит, что функция может иметь различный контекст в зависимости от того, как она была вызвана.

Давайте вернемся к примеру и немного дополним его:

var card = {
  firstname : 'Ivan',
  lastname  : 'Ivanov',
  year      : '1974',
  employed  : new Date(2004,1,12),
  phone     : {
    home    : '(495)353-5353',
    mobile  : '(903)261-1777'
  },
  showData   : function() {
    return this.lastname+'
            '+this.firstname+'
            '+this.phone.mobile;
  }
};

К первоначальному коду мы добавили свойство с именем showData, которое ссылается на экземпляр Function. Если теперь вызвать функцию через свойство:

alert(card.showData());

то в качестве контекста функции будет установлен экземпляр объекта на который указывает card. В результате мы увидим следующее:

Ivanov Ivan (903)261-1777

Ну это все вполне естественно, гораздо более интересен следующий пример. JavaScript позволяет четко установить, что будет использоваться в качестве контекста функции. Вызывая функцию с помощью методов call() или apply() экземпляра Function, мы можем передать в качестве контекста все, что угодно.

var obj1 = { myProperty: 'object 1' };
var obj2 = { myProperty: 'object 2' };
var obj3 = { myProperty: 'object 3' };
window.myProperty = 'object window';

function showProperty() {
  return this.myProperty;
}

obj1.identifyMe = showProperty;

alert(showProperty());
alert(obj1.identifyMe());
alert(showProperty.call(obj2));
alert(showProperty.apply(obj3));

Определили три простых объекта, у каждого из которых есть свойство myProperty. Добавили свойство myProperty в экземпляр объекта window. Определили глобальную функцию, которая возвращает значение свойства myProperty для любого объекта, используемого в качестве контекста этой функции. И еще присвоили эту же самую функцию свойству с именем identifyMe объекта obj1.

Дальше самое интересное – четыре раза мы вызываем один и тот же экземпляр функции другим способом и посмотрите, что получается:
- в первом случае вызываем функцию как глобальную и контекстом функции является экземпляр объекта window о чем свидетельствует текст в окне предупреждения – «object window«.
- во втором случае вызываем функцию как свойство объекта obj1 и контекстом функции становится этот объект. Текст в окне предупреждения – «object 1«.
- в третьем случае используем метод call() объекта Function и контекстом функции становится объект, переданный методу call() в качестве первого параметра. Текст в окне предупреждения – «object 2«.
- наконец в четвертом случае используем метод apply(), передавая ему в качестве первого аргумента obj3, и получаем текст в окне предупреждения – «object 3«.

Пример можно открыть в отдельном окне.

Вывод такой: функция fn действует как метод объекта ob, когда объект ob выступает в качестве контекста при вызове функции fn.

Что такое замыкание?

Замыкание (closure) – это экземпляр Function вместе с локальными переменными из его окружения, необходимыми для выполнения.

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

Лучше всего пояснить это на простом примере (здесь уже используем библиотеку jQuery):

$(function(){
  var local = 1;
  window.setInterval(function(){
    $('#result').append(new Date()+
                ' значение local = '+local+'   ');
    local++;
  },5000);
});

После загрузки DOM объявляем переменную local и присваиваем ей числовое значение 1. С помощью метода setInterval() взводим таймер, который будет срабатывать каждые 5 секунд. В качестве функции обратного вызова для таймера, определяем функцию, которая каждые пять секунд будет добавлять текущее время и значение переменной local. Кроме того, при каждом срабатывании таймера значение переменной local должно увеличиваться на единицу.

Пример можно открыть в отдельном окне.

Можно было подумать, что поскольку функция обратного вызова запустится только лишь спустя 5 секунд после готовности DOM, то во время выполнения функции переменная local окажется неопределенной, ведь код в котором определяется local выходит из области видимости, как только обработчик события готовности DOM заканчивает свою работу.

Тем не менее этот код прекрасно работает, благодаря замыканию, созданному при объявлении функции и включающему в себя переменную local. Замыкание остается в области видимости функции на протяжении всего жизненного цикла.

При работе с jQuery (особенно при использовании возможностей ajax) Вы будете довольно часто сталкиваться с замыканиями. Поэтому необходимо обратить внимание на еще одну важную особенность замыканий – контекст функции никогда не является частью замыкания. Опять же на примере будет гораздо понятнее.

Посмотрите такой код:

this.id = 'someID';
$('*').each(function(){
  alert(this.id);
});

Мы могли бы ожидать, что в окне предупреждения для каждого элемента будет раз за разом отображаться значение someID, однако это совсем не так. Мы увидим окно предупреждений столько раз, сколько элементов будет отобрано в объект jQuery и каждый раз будет отображаться значение атрибута id следующего элемента (или пустое окно предупреждения, если такого атрибута нет). Это происходит потому, что у каждого вызова функции собственный контекст, и в данном случае контекстом является элемент из объекта jQuery.

Давайте немного исправим пример:

this.id = 'someID';
var someVar = this;
$('*').each(function(){
  alert(someVar.id);
});

Переменная someVar становится частью замыкания и будет доступна внутри функции обратного вызова. Такой код будет раз за разом выдавать в окне предупреждения одно и тоже значение – someID.

Ну, вот вроде бы и все. Осталось сказать, что если твердо усвоить все эти понятия, то создавать эффектные и эффективные сценарии на JavaScript с использованием jQuery будет гораздо проще…

Итак, элемент Canvas предназначен для создания bitmap изображения при помощи JavaScript, т.е. мы получаем возможность создавать графические формы, рисовать линии, вращать изображения.

Такие возможности подстегнули производителей браузеров к включению API canvas в последние версии своих продуктов – FireFox, Opera, Chrome, Safari поддерживают тэг canvas. Как всегда неприятным исключением оказался горячо нелюбимый всеми Internet Explorer – не то что в 6 и 7 версиях, даже в 8 версии поддержка тэга canvas не планируется.

Однако не все так безнадежно как могло бы показаться – на помощь пришла компания Google, реализовав для IE полноценный API Canvas. По сути это небольшой js-файл, подключая который для браузеров IE можно заставить их «понимать» тэг canvas. Найти этот файл можно тут:
http://code.google.com/p/explorercanvas/

Но вернемся к нашему примеру. Для того, чтобы изобразить такие часики на своей страничке понадобится подключить в разделе HEAD файл excanvas.js – это для ого, чтобы заставить браузеры IE понимать canvas:

<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
< ![endif]-->

В body добавим следующую разметку:

<canvas id="canvas" height="150" width="150"></canvas>

И самое главное – JS-код, который и рисует сами часики:

// ожидаем загрузку
window.onload = function(){
  // рисуем часы
  clock();
  // через каждую секунду
  // часы перерисовываются
  setInterval(clock, 1000);
}
//
function clock() {
  // получаем текущие дату и время
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr = now.getHours();

  // получаем контекст canvas
  var ctx = document
  .getElementById("canvas")
  .getContext("2d");

  // сохраняем состояние
  ctx.save();
  // инициализируем холст
  ctx.clearRect(0,0,150,150);
  // рисуя в точке 0,0 фактически
  // рисуем в точке 75,75
  ctx.translate(75,75);
  // при рисовании линии в 100px
  // фактически рисуем линию в 40px
  ctx.scale(0.4,0.4);
  // начинаем вращать с 12:00
  ctx.rotate(-Math.PI/2);

  // инициализируем свойства рисунка
  // контуры рисуем черным
  ctx.strokeStyle = "black";
  // заливка тоже черная
  ctx.fillStyle = "black";
  // ширина линии 8px
  ctx.lineWidth = 8;
  // будем рисовать по кругу
  ctx.lineCap = "round";

  // начинаем рисовать часовые метки
  // сохраняем предыдущее состояние
  ctx.save();
  ctx.beginPath();
  // для каждого часа
  for(var i = 0; i < 12; i++) {
  	// поворачиваем на 1/12
    ctx.rotate(Math.PI/6);
    // перемещаем курсор
    ctx.moveTo(100,0);
    // рисуем черточку 20px
    ctx.lineTo(120,0);
  }
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // ставим ширину линии 5px
  ctx.lineWidth = 5;
  ctx.beginPath();
  // рисуем минутные метки
  // для каждой минуты
  for(var i = 0; i < 60; i++) {
  	// кроме тех, что совпадут
  	// с часами
    if(i%5 != 0) {
      // перемещаем курсор
      ctx.moveTo(117,0);
      // рисуем черточку 3px
      ctx.lineTo(120,0);
    }
    // вращаем холст на 1/60
    ctx.rotate(Math.PI/30);
  }
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать часовую стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/6)*hr +
             (Math.PI/360)*min +
             (Math.PI/21600)*sec);
  // устанавливаем ширину линии 14px
  ctx.lineWidth = 14;

  ctx.beginPath();
  // сдвигаем курсор несколько назад
  // стобы было похоже на стрелку
  ctx.moveTo(-20,0);
  // рисуем линию почти до часовых меток
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать минутную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/30)*min +
             (Math.PI/1800)*sec);
  // ширина линии 10px
  ctx.lineWidth = 10;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(-28,0);
  // рисуем линию
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать секундную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate(sec * Math.PI/30);
  // контур и заливка красного цвета
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  // ширина линии 6px
  ctx.lineWidth = 6;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(-30,0);
  // рисуем линию
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // рисуем внешнюю окружность
  // шириной 14px
  ctx.lineWidth = 14;
  // синим цветом
  ctx.strokeStyle = "#325FA2";
  ctx.beginPath();
  // рисуем окружность, отступающую
  // от центра на 142px
  ctx.arc(0,0,142,0,Math.PI*2,true);
  ctx.stroke();
  ctx.restore();

  ctx.restore();
}

Вы можете скачать файлы этого примера. Можно открыть пример в новом окне и посмотреть исходный код.

В заключение я приведу несколько очень полезных ссылок, для тех, кто заинтересовался.
Canvas Tutorial – туториал (на английском конечно), но там Вы найдете еще впечатляющие примеры.
The canvas element – подраздел спецификации HTML5, касающийся элемента canvas (и тоже ес-но на английском).