自行车车把会吧车刮坏吗

by Wing Puah

永帕(Wing Puah)

花10分钟即可开始使用车把 (Take 10 minutes to get started with Handlebars)

Nowadays front-end development is no longer about building static HTML markup and compiling SASS files. The rise of Single Page Applications (SPAs) means we can do a lot of the rendering logic on the client-side. Modern day web development often require dynamic data input.

如今，前端开发不再涉及构建静态HTML标记和编译SASS文件。单页应用程序(SPA)的兴起意味着我们可以在客户端执行许多呈现逻辑。现代Web开发通常需要动态数据输入。

While React.js is great, often it requires a learning curve for the developers before they can integrate it into the team. Recently, I was tasked with building the front-end of a course website. That marked the start of my exploration into Handlebars.js.

尽管React.js很棒，但开发人员在将其集成到团队之前通常需要学习曲线。最近，我受命建立一个课程网站的前端。这标志着我开始探索Handlebars.js的开始。

Handlebars is a popular and simple templating engine that is simple to use. It looks a lot like regular HTML, with embedded handlebars expressions in the curly braces {{}}.

Handlebars是一种易于使用的流行且简单的模板引擎。它看起来很像常规HTML，在花括号{{}}中带有嵌入式车把表达式。

<div class="entry">   <h1>{{name}}</h1>   <div>{{quote}}</div> </div>

Before we move on to the details of Handlebars, let’s see how data will be inserted into the page through vanilla Javascript. We will take the example of building a webpage that lists a few quotes. Because, hey, everyone needs some inspiration.

在继续介绍Handlebars的细节之前，让我们看一下如何通过原始Javascript将数据插入页面。我们将以构建一个列出一些引号的网页为例。因为，嘿，每个人都需要一些灵感。

香草javascript (Vanilla javascript)

资料检索 (Data retrieval)

Most of the time, you might be retrieving data via ajax, but for simplicity, we will create our own data object.

大多数时候，您可能是通过ajax检索数据，但是为了简单起见，我们将创建自己的数据对象。

// 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."} ]

创建HTML标记 (Create HTML markup)

// index.html<div class="container>  <div class="row" id="quotes">  </div></div>

用Javascript添加数据 (Adding the data with Javascript)

We will use a for loop to loop through the content above.

我们将使用for循环遍历上面的内容。

//quotes.jslet quoteMarkup = '';

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

quoteMarkup += '<div class="col-12 col-sm-6">' +                  '<h5>' + name + '</h5>' +                  '<p>' + quote + '</p>'                 '</div>'}

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

With code like this, it is difficult to read and tedious to write. And the HTML markup for this page now resides in both the index.html and quotes.js.

使用这样的代码，很难阅读，也很难编写。现在，此页面HTML标记同时位于index.html和quotes.js中。

输入车把 (Enter handlebars)

入门 (Getting started)

To start off, we need to include the Handlebar source code file. You can add the link inside the head tag or before the end of <body>.

首先，我们需要包含Handlebar源代码文件。您可以在head标记内或<body>末尾之前添加链接。

&lt;script src="js/handlebars.js">&lt;/script>

Alternatively, you can also link to Handlebars from a CDN.

或者，您也可以从CDN链接到车把。

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

创建模板 (Create the template)

We will still use the data object of quotes from the file above. We will sprinkle some Handlebars magic on the index.html file.

我们仍将使用上面文件中引号的数据对象。我们将在index.html文件上添加一些Handlebars魔术。

//index.html<div class="container>  <div id="quotes">

<script id="quotes-template" type="text/x-handlebars-template">                  <div class="row">                    {{#each this}}                      <div class="col-12 col-sm-6 p-3">                          <div class="card">                              <h4 class="card-header">                                  {{name}}                              </h4>                              <div class="card-body">                                  {{quote}}                         </div>                          </div>                     </div>                    {{/each}}                </div>            </script>    </div></div>

each: Iterates through the data

每个：遍历数据
this: References to the current context.

此，R eferences 在当前情况下。
text/x-handlebars-template: To tell the browser not to execute the script as normal Javascript.

text / x-handlebars-template ：告诉浏览器不要像普通Javascript一样执行脚本。

使用把手编译模板 (Compile the template with Handlebars)

It only takes a few lines to compile the data with Handlebars. That is what I love about it. Even if someone on the team has not used Handlebars before, the script and markup are very simple for them to understand and pick up.

只需几行即可使用Handlebars编译数据。那就是我所喜欢的。即使团队中的某人以前从未使用过Handlebars，脚本和标记也很容易让他们理解和掌握。

let content = document.getElementById('quotes'),    src = document.getElementById('quotes-template').innerHTML,     template = Handlebars.compile(src),            html = template(quotes);

content.innerHTML = html;

content: Returns the element into which you want to insert the compiled information.

content ：返回要在其中插入编译信息的元素。
src: Retrieves the markup of the template.

src ：检索模板的标记。
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.

Handlebars.compile(src) ：编译正在使用的模板。它将返回一个函数，数据可以传递到该函数，以便可以呈现它。
template(quotes): Compiles the data into the template.

template(quotes) ：将数据编译到模板中。
content.innerHTML: Renders the above to the DOM

content.innerHTML ：将以上内容呈现给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.

我将Handlebars用于多个模板的网站。我发现自己多次编写相同的ajax和Handlebars代码。因此，这是我创建的两个使我的生活更轻松的函数。

使用Javascript从Ajax获取数据 (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.

有了这两个功能，我可以在一个Javascript文件中运行所有的Handlebars代码。它看起来像这样。

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

runHandlebars('contributors', '/data/contributors.json', 'contributors-template');

结论 (Conclusion)

My experience with Handlebars has been a positive one. In my project, I use it with gulp and metalsmith. Will I use it for other projects? My take is I prefer something like React or a full fledged static site generator like Jekyll. But in this case, when the team is more comfortable with HTML markup and it is a relatively simple website, Handlebars is a good choice.

我在车把方面的经验很积极。在我的项目中，我将它与gulp和metalsmith一起使用。我将其用于其他项目吗？我的看法是，我更喜欢像React这样的东西或像Jekyll这样的成熟的静态站点生成器。但是在这种情况下，当团队更熟悉HTML标记并且它是一个相对简单的网站时，Handlebars是一个不错的选择。

翻译自: https://www.freecodecamp.org/news/take-10-minutes-to-get-started-with-handlebars-298632ed82ab/