Иногда вам не требуется высококачественное шаблонное решение , но вам все равно нужно не смешивать множество неприятного HTML-кода с вашим JavaScript. В этих случаях простая, временная система шаблонов может иметь большое значение.
Выберите 720p для лучшей наглядности.
Подпишитесь на наш канал YouTube для получения дополнительной подготовки.
Подпишитесь на наш канал YouTube для получения дополнительной подготовки.
Окончательный источник
HTML
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html public ‘ahh hell yeah’>
<html>
<head>
<meta charset=utf-8>
<title>Simple Templating</title>
</head>
<body>
<div class=»result»></div>
<script type=»template» id=»template»>
<h2>
<a href=»{{href}}»>
{{title}}
</a>
</h2>
<img src=»{{imgSrc}}» alt=»{{title}}»>
</script>
</body>
</html>
|
JavaScript
|
1
|
;(function() { // simulates AJAX request var data = [ { title: «Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5», href: «http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/», imgSrc: «https://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg» }, { title: «Nettuts+ Quiz #8», href: «http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/», imgSrc: «https://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg» }, { title: «WordPress Plugin Development Essentials», href: «http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/», imgSrc: «https://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png» } ], template = document.querySelector(‘#template’).innerHTML, result = document.querySelector(‘.result’), i = 0, len = data.length, fragment = »; for ( ; i < len; i++ ) { fragment += template .replace( /\{\{title\}\}/, d
|
альтернатива
Метод, описанный в скринкасте, является наиболее читабельным, однако, если вы предпочитаете более автоматизированный подход, мы можем динамически применять значения и регулярные выражения, например:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
;(function () {
// simulates AJAX request
var data = [{
title: «Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5»,
href: «http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/»,
imgSrc: «https://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg»
}, {
title: «Nettuts+ Quiz #8»,
href: «http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/»,
imgSrc: «https://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg»
}, {
title: «WordPress Plugin Development Essentials»,
href: «http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/»,
imgSrc: «https://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png»
}],
template = document.querySelector(‘#template’).innerHTML,
result = document.querySelector(‘.result’),
attachTemplateToData;
// Accepts a template and data.
// data, and replaces each key in the template, accordingly.
attachTemplateToData = function(template, data) {
var i = 0,
len = data.length,
fragment = »;
// For each item in the object, make the necessary replacement
function replace(obj) {
var t, key, reg;
for (key in obj) {
reg = new RegExp(‘{{‘ + key + ‘}}’, ‘ig’);
t = (t || template).replace(reg, obj[key]);
}
return t;
}
for (; i < len; i++) {
fragment += replace(data[i]);
}
return fragment;
};
result.innerHTML = attachTemplateToData(template, data);
})();
|
Это метод, который я, скорее всего, буду использовать.
Дополнительные инструменты
Если вы предпочитаете более гибкое решение, любое из следующего должно помочь!