Слияние кода завершено, страница обновится автоматически
Razor-синтаксис в JavaScript-шаблонизаторе.
Поддерживает некоторые простые проверки синтаксиса, может определить номер строки с ошибкой синтаксиса.
Есть поддержка кэширования, для обеспечения уникальности кэша используется Crc32.
Расширения позволяют быстро создавать HTML-элементы и обеспечивают неограниченное наследование шаблонов.
Если вы не привыкли к Razor-синтаксису, расширения позволяют использовать hmtltag для определения шаблона.
Ссылка на Pjt:
<script src="pithy.teemplate.js"></script>
Компиляция шаблона:
var codes = Pjt.compile('<h3>@title</h3><p>@description</p>');
Рендеринг данных:
var text = Pjt.render(codes, {
title : 'Заголовок Pjt',
description : 'Описание: Razor-синтаксический JavaScript-шаблонизатор'
});
Результат:
<h3>Заголовок Pjt</h3><p>Описание: Razor-синтаксический JavaScript-шаблонизатор</p>
resources несколько примеров использования распространённых методов
src Pjt-код
pithy.ajax.js необязательный, но полезный плагин для запросов ajax
pithy.teemplate.js обязательный Pjt-ядро
pithy.teemplate.helper.js необязателен, но содержит удобные функции для быстрой работы
pithy.teemplate.htmlhelper.js необязателен, позволяет быстро генерировать элементы HTML-форм без вызова каких-либо функций, автоматически включается после ссылки
pithy.teemplate.extends.js необязателен, реализует расширение функциональности Pjt
pithy.teemplate.htmltag.js необязателен, автоматически реализует расширение функциональности HTML-тегов, включается после ссылки без необходимости вызова каких-либо методов
demo простые примеры
extends.html пример расширения Pjt
htmlhelper.htmlhtml пример генерации элементов HTML-формы
index.htmlhtml базовый пример
layouts.htmlhtml используется в примере extends для макета содержимого
index.html онлайн компиляция и рендеринг
В каталоге src файл pithy.teemplate.js является основным файлом, обязательным для Pjt.
Остальные файлы в каталоге являются расширениями.
Файл pithy.ajax.js представляет собой простую библиотеку запросов AJAX, которая включает require для использования модулей, соответствующих спецификации AMD.
Файлы pithy.teemplate.*.js представляют собой четыре библиотеки расширений, которые могут расширить функциональность Pjt. Их можно напрямую ссылаться через теги script или использовать AJAX.require.
{
name : 'anlige',
age : 23,
list : [
{date : '1986-9-1', text : 'birthday'},
{date : '1998-9-1', text : 'schrool'},
{date : '2009-6-21', text : 'work'}
],
basic : {
sex : 'boy',
works : 9
}
}
///инициализация экземпляра
///компиляция шаблона
var code = Pjt.compile('<p>@name</p>');
///рендеринг данных
id('result2').innerHTML = Pjt.render(code, {name : 'Jazor'});
PjtHelper
.compile('<p>@name</p>')
.render({name : 'Jazor'})
.appendTo('result');
Метод appendTo присваивает результат рендеринга тегу result.
///компиляция
var render = PjtHelper.compile('<p>@name</p>');
///рендеринг
var appender = render.render({name : 'Jazor'});
///присвоение значения
id('result3').innerHTML = appender;
Здесь значение appender присваивается тегу result3.
/*
PjtHelper.bind(data, src, dest);
data : данные для рендеринга
src : HTML-элемент, содержащий текст шаблона для компиляции
dest : 1. HTML-элемент для отображения результата рендеринга,
2. функция обратного вызова, первый параметр которой является результатом рендеринга
*/
PjtHelper.bind({name : 'Jazor'}, '_template', 'result3');
// эквивалентно
PjtHelper.bind({name : 'Jazor'}, '_template', function(res){
document.getElementById('result3').innerHTML = res;
});
<div>name = @name</div>
<div>age = @age</div>
<div>4 years later = @(age + 4)</div>
<div>sex = @basic['sex']</div>
<div>works = @basic.works</div>
Поддерживаются основные выражения, при необходимости можно использовать «()» в качестве разделителя выражений. Для вывода символа @ в шаблоне используйте @@.
@{
var r = 255, g = 0, b = 0;
}
<div style="color:rgb(@r, @g, @b)">color:rgb(@r, @g, @b)</div>
Используйте @, за которым следует {для обозначения начала блока кода, код внутри блока будет рассматриваться как обычный текст, но будет участвовать в рендеринге переменных. Этот блок в основном используется для включения тегов style или script в шаблон, хотя не рекомендуется включать их в шаблоны, а вместо этого использовать только HTML-теги.
@if( age > 23){
<p>больше 23 лет</p>
}else{
<p>меньше или равно 23 годам</p>
}
<ul>
@for(var i = 0; i < list.length; i++){
<li>@list[i].date</li>
}
</ul>
<ul>
@each list as value{
<li>дата = @value.date</li>
}
</ul>
<ul>
@each list as key, value{
<li>ключ = @key, дата = @value.date</li>
}
</ul>
<ul>
@foreach basic as key, value{
<li>@key = @value</li>
}
</ul>
Операторы each и foreach являются синтаксическим сахаром и компилируются в нативный JS.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )