Одвојите 10 минута да започнете са управљачима

Данас се фронт-енд развој више не односи на изградњу статичких ХТМЛ ознака и компајлирање САСС датотека. Пораст апликација са једном страницом (СПА) значи да можемо учинити много логике приказивања на страни клијента. Савремени веб развој често захтева динамички унос података.

Иако је Реацт.јс одличан, програмерима је често потребна кривуља учења пре него што га могу интегрисати у тим. Недавно сам имао задатак да направим предњи крај веб странице курса. То је означило почетак мог истраживања на Хандлебарс.јс.

Руке су популаран и једноставан механизам за шаблонирање који је једноставан за употребу. Изгледа много попут уобичајеног ХТМЛ-а, са уграђеним изразима управљача у витичастим заградама {{}}.

{{name}}

{{quote}}

Пре него што пређемо на детаље управљача, погледајмо како ће се подаци убацивати на страницу путем ванилин Јавасцрипта. Узећемо пример израде веб странице која наводи неколико цитата. Јер, хеј, свима је потребна нека инспирација.

Ванилија јавасцрипт

Дохват података

Већину времена можда долазите до података путем ајак-а, али ради једноставности створићемо сопствени објекат података.

// quotes.js var quotes = [ {name: "Frank Lloyd Wright", quote: "You can use an eraser on the drafting table or a sledge hammer on the construction site."}, {name: "Douglas Adams", quote: "The major difference between a thing that might go wrong and a thing that cannot possibly go wrong is that when a thing that cannot possibly go wrong goes wrong it usually turns out to be impossible to get at or repair."}, {name: "Ettore Sottsass", quote: "I try and be as stupid as possible regarding my profession, which means I try to look at as few design magazines as possible."}, {name: "Shaun White", quote: "I’m a big fan of doing what you are really bad at. A lot."} ]

Направите ХТМЛ маркуп

// index.html 

Додавање података помоћу Јавасцрипта

Користићемо фор петљу за петљу кроз горе наведени садржај.

//quotes.jslet quoteMarkup = '';
for (var i = 0; i < quotes.length; i++) { let name = quotes[i].name, quote = quotes[i].quote;
quoteMarkup += ' ' + '
' + name + '
' + '

' + quote + '

' ' '}
document.getElementById('quotes').innerHTML = quoteMarkup;

Са оваквим кодом тешко је читати и досадно писати. А ХТМЛ ознаке за ову страницу сада се налазе и у индек.хтмл и у куотес.јс.

Унесите управљач

Почетак

За почетак морамо да укључимо датотеку изворног кода Хандлебар. Везу можете додати унутар ознаке главе или пре краја.

Можете и да се повежете са управљачима са ЦДН-а.

Направите образац

И даље ћемо користити објект података цитата из горње датотеке. Посипаћемо мало чаробних ручица на датотеку индек.хтмл.

//index.html 
 {{#each this}} 

{{name}}

{{quote}} {{/each}}
  • сваки : Интеракција кроз податке
  • ово : Р ЛИТЕРАТУРАтренутном контексту.
  • тект / к-хандлебарс-темплате : Да кажете прегледачу да не извршава скрипту као уобичајени Јавасцрипт.

Саставите образац помоћу волана

Потребно је само неколико редова за састављање података помоћу управљача. То је оно што волим код тога. Чак и ако неко из тима раније није користио управљачке палице, скрипт и ознаке су врло једноставни за разумевање и преузимање.

let content = document.getElementById('quotes'), src = document.getElementById('quotes-template').innerHTML, template = Handlebars.compile(src), html = template(quotes);
content.innerHTML = html;
  • садржај : Враћа елемент у који желите да убаците састављене информације.
  • src: Retrieves the markup of the template.
  • Handlebars.compile(src): Compiles the template in use. It will return a function that the data can be passed to so it can be be rendered.
  • template(quotes): Compiles the data into the template.
  • content.innerHTML: Renders the above to the DOM

You can view the project here.

Bonus

I used Handlebars for a multiple-templates website. I found myself writing the same ajax and Handlebars code multiple times. So, here are the two functions that I created to make my life easier.

Getting data from ajax with Javascript

function ajaxGet(url, callback) { let xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // console.log(xmlhttp.responseText); try { var data = JSON.parse(xmlhttp.responseText); } catch(err) { console.log(err.message +' Getting: ' + url); return; } callback(data); } };
xmlhttp.open("GET", url, true); xmlhttp.send();}

Function to run Handlebars

function runHandlebars(id, dataSrc, src) { if(document.getElementById(id) != null) { let content = document.getElementById(id); ajaxGet(dataSrc, function(data){ let source = document.getElementById(src).innerHTML, template = Handlebars.compile(source);
content.innerHTML = template(data); }); }}

With these two functions, I could run all my Handlebars code on a single Javascript file. It will look something like this.

runHandlebars('nav-sub-1', '/data/courses.json', 'nav-submenu-template');
runHandlebars('contributors', '/data/contributors.json', 'contributors-template');

Conclusion

Моје искуство са управљачима било је позитивно. У свом пројекту га користим са гутљајем и металима. Да ли ћу га користити за друге пројекте? Претпостављам да више волим нешто попут Реацт-а или пуноправног статичког генератора веб локација попут Јекилла. Али у овом случају, када је тиму угодније ХТМЛ означавање и када је реч о релативно једноставној веб локацији, Хандлебарс је добар избор.