Эта статья представляет собой практическое вводное руководство для JSrender, в котором примеры описывают такие точки знаний, как использование тега Else и цикл вложенного доступа к родительским данным. Поделитесь этим для вашей ссылки. Детали следующие:
Предисловие
Jsrender - это шаблонный двигатель JavaScript, основанный на JQuery. Он имеет следующие функции:
・ Простые и интуитивно понятные
· Мощный
・ Расширяется
・ Так же быстро, как молния
Эти функции выглядят потрясающе, но почти каждый шаблонный двигатель будет рекламироваться таким образом. Полем Полем
Из -за рабочих потребностей Xiaocai вступил в контакт с этим шаблонным двигателем. После некоторого использования, я обнаружил, что это действительно довольно мощное, но Сякай чувствует, что некоторые места слишком сильны, что заставляет людей трудно понять.
С другой стороны, официальные документы JSrender относительно подробно, но удивительно мало информации. Если вы столкнетесь с какими -либо проблемами, вы можете не искать. Мало того, что вы можете найти связанные проблемы, но и почти нет.
Кроме того, некоторые части JSrender действительно трудно понять, поэтому мне срочно нужны некоторые «лучшие практики».
Основываясь на недавнем использовании, Xiaocai суммировал некоторый практический опыт, и, конечно, этот опыт не может быть найден в официальной документации.
Вложенный цикл для доступа к родительским данным с использованием #parent (не рекомендуется)
Скопируйте код следующим образом: <! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> Вложенный цикл с использованием #parent для доступа к родительским данным --- Ян Юань </title>
<style>
</style>
</head>
<тело>
<div>
<Таблица>
<голова>
<tr>
<Th> серийный номер </th>
<Th> имя </th>
<Th> члены семьи </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Определите шаблон jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<Td>
{{для семьи}}
{{!-используйте #parent для доступа к родительскому индексу-}}
<b> {{:#parent.parent.index + 1}}. {{:#index + 1}} </b>
{{!-используйте #parent для доступа к родительским данным, а родительские данные сохраняются в атрибуте данных-}}
{{!-#Data эквивалентна этому-}}
{{: #data}} of {{: #data}}
{{/для}}
</td>
</tr>
</script>
<Скрипт>
// Источник данных
var DataSrouce = [{
Имя: "Чжан Сан",
семья: [
"папа",
"Мать",
"Старший брат"
]
}, {
имя: "li si",
семья: [
"Дедушка",
"бабушка",
"дядя"
]
}];
// рендеринг данных
var html = $ ("#testtmpl"). render (datasrouce);
$ ("#list"). Append (html);
</script>
</body>
</html>
Вложенные петли для доступа к родительским данным с использованием параметров (рекомендуется)
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<Title> Вложенные петли Используйте параметры для доступа к родительским данным --- Ян Юань </title>
<style>
</style>
</head>
<тело>
<div>
<Таблица>
<голова>
<tr>
<Th> серийный номер </th>
<Th> имя </th>
<Th> члены семьи </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Определите шаблон jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{:#index + 1}} </td>
<td> {{: name}} </td>
<Td>
{{!- При использовании цикла для цикла вы можете добавить параметры впоследствии. Параметры должны начинаться с ~, а несколько параметров разделены пространствами-}}
{{!- через параметры, мы кэшируем родительские данные. Доступ к параметрам в детском цикле, мы можем косвенно получить доступ к родительским данным-}}
{{для семьи ~ parentIndex =#index ~ parentname = name}}
<b> {{: ~ parentindex + 1}}. {{:#index + 1}} </b>
{{!-#Data эквивалентна этому-}}
{{: #data}} of {{: ~ parentname}}
{{/для}}
</td>
</tr>
</script>
<Скрипт>
// Источник данных
var DataSrouce = [{
Имя: "Чжан Сан",
семья: [
"папа",
"Мать",
"Старший брат"
]
}, {
имя: "li si",
семья: [
"Дедушка",
"бабушка",
"дядя"
]
}];
// рендеринг данных
var html = $ ("#testtmpl"). render (datasrouce);
$ ("#list"). Append (html);
</script>
</body>
</html>
Используйте еще в пользовательских тегах (не рекомендуется)
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<TILE> Используйте Else в пользовательских тегах --- Ян Юань </title>
<style>
</style>
</head>
<тело>
<div>
<Таблица>
<голова>
<tr>
<Th> имя </th>
<Th> Цена за единицу </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Определите шаблон jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<Td>
{{!-isshow-это пользовательский тег, цена-это параметр, статус-это дополнительное свойство-}}
{{isshow Price Status = 0}}
{{:цена}}
{{else Цена Статус = 1}}
-
{{/isshow}}
</td>
</tr>
</script>
<Скрипт>
// Источник данных
var DataSrouce = [{
Имя: "Apple",
Цена: 108
}, {
имя: "da li",
Цена: 370
}, {
Имя: "Персик",
Цена: 99
}, {
Имя: «Ананас»,
Цена: 371
}, {
Название: "Orange",
Цена: 153
}];
// пользовательский тег
$ .views.tags ({
"isshow": function (цена) {
var temp = price+''. split ('');
if (this.tagctx.props.status === 0) {
// Судите, является ли цена количествою нарциссов. Если это так, это будет отображаться, в противном случае он не будет отображаться.
if (цена == (math.pow (parseint (temp [0], 10), 3)+math.pow (parseint (temp [1], 10), 3)+math.pow (parseint (temp [2], 10), 3))) {
вернуть this.tagctxs [0] .render ();
}еще{
вернуть this.tagctxs [1] .render ();
}
}еще{
возвращаться "";
}
}
});
// рендеринг данных
var html = $ ("#testtmpl"). render (datasrouce);
$ ("#list"). Append (html);
</script>
</body>
</html>
Используйте помощника вместо пользовательских тегов (рекомендуется)
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<Title> Используйте помощник вместо пользовательских тегов --- Ян Юань </title>
<style>
</style>
</head>
<тело>
<div>
<Таблица>
<голова>
<tr>
<Th> имя </th>
<Th> Цена за единицу </th>
</tr>
</head>
<tbody id = "list">
</tbody>
</table>
</div>
<script src = "jquery.min.js"> </script>
<script src = "jsviews.js"> </script>
<!-Определите шаблон jsrender->
<script id = "testtmpl" type = "text/x-jsrender">
<tr>
<td> {{: name}} </td>
<Td>
{{!-Используйте Native, если для прыжков с ветвью, используйте помощник для логической обработки-}}
{{if ~ isshow (цена)}}
{{:цена}}
{{еще}}
-
{{/если}}
</td>
</tr>
</script>
<Скрипт>
// Источник данных
var DataSrouce = [{
Имя: "Apple",
Цена: 108
}, {
имя: "da li",
Цена: 370
}, {
Имя: "Персик",
Цена: 99
}, {
Имя: «Ананас»,
Цена: 371
}, {
Название: "Orange",
Цена: 153
}];
// помощник
$ .views.helpers ({
"isshow": function (цена) {
var temp = price+''. split ('');
if (цена == (math.pow (parseint (temp [0], 10), 3)+math.pow (parseint (temp [1], 10), 3)+math.pow (parseint (temp [2], 10), 3))) {
вернуть истину;
}еще{
вернуть ложь;
}
}
});
// рендеринг данных
var html = $ ("#testtmpl"). render (datasrouce);
$ ("#list"). Append (html);
</script>
</body>
</html>
Нажмите здесь, чтобы загрузить полный пример кода.
Я надеюсь, что эта статья будет полезна для обучения программированию каждого JSrender.