handlebars.js_Handlebars.js入门指南

最新推荐文章于 2023-09-11 11:09:14 发布

cune1359

最新推荐文章于 2023-09-11 11:09:14 发布

阅读量1.5k

点赞数

文章标签： python java html vue js ViewUI

在本文中，我们将研究Handlebars ，这是一个基于MustacheJavaScript模板引擎。它与Moustache具有相同的功能，但具有许多新功能。 Handlebars是一个实用的模板工具，特别是用于以JSON形式显示数据序列，而JSON是今天在Web应用程序API中使用的常见数据格式形式。查看这篇介绍性文章，它很好地解释了JSON。

在本文中，我们将带您了解Handlebars的一些基本功能，并且在本文结尾处还将研究一个真实的示例。如果您想了解这一点，那么让我们开始吧。

入门

首先，让我们转到Handlebars网站并下载源代码文件handlebars.js 。将文件放在项目的适当文件夹中。从HTML文档链接文件。您可以将链接添加到head标签内或<body>之前。

<script src="js/handlebars.js"></script>

或者，您也可以从CDN链接到“把手”源。

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

完成后，我们可以开始创建模板。

基本模板

让我们添加数据：姓名，年龄和人员来源。

var dataSource = {
"name": "Joe Bloggs",
    "age": "19",
    "from": "United Kingdom"
}

该数据作为示例。如前所述，您可以从大多数提供开放API的Web应用程序（例如Twitter ， Instagram ， Flickr和Dribbble）中检索相似形式的数据-尽管您将获得比上面显示的更多的数据行。另外，您可以尝试使用JSON Generator生成一些随机数据。

模板

一旦掌握了数据，就可以创建模板来放置这些数据。让我们看一下下面的代码。

<div id="content" class="content-wrap">
    <script id="template" type="text/x-handlebars-template">
	<p>Hi, I'm {{name}}. I'm {{age}}, and I'm from {{from}}</p>        
    </script>
</div>

Handlebars模板在脚本标签中设置为特殊类型： text/x-handlebars-template ，最好还带有ID，因为从技术上讲，在JavaScript中选择带有ID 的元素比使用类更直接，更快捷。

尽管每个数据都用双花括号声明， {{...}} ；这也称为Handlebars表达式 。

但是，在浏览器中看到结果之前，我们必须编译这些代码，然后将数据合并到模板中。

编译中

让我们像这样将模板存储在JavaScript变量中。

var template = $('#template').html();

然后，我们将template变量放入Handlebars.compile()以编译模板。

var compile = Handlebars.compile(template);

上面的代码中最重要的是变量的名称compile 。我们将其与数据一起使用以生成最终结果，如下所示：

var result = compile(dataSource);

最后，我们通过jQuery .html()方法将其放在#content 。

$('#content').html(result);

这将使我们在浏览器中获得以下结果。

HTML转义

有时我们的数据可能包含HTML标签，例如：

var dataSource = {
"name": "<em>Joe Bloggs</em>",
    "age": "19",
    "from": "United Kingdom"
}

默认情况下，把手将转义这些标签。他们会将标签变成他们的实体， <将变成< 而>将变成> 。因此，在浏览器中，我们将得到意外的结果，如下所示。

为防止把手将HTML标签转换为它们的实体字符，并按原样对待它们，我们使用三元大括号{{{...}}}声明数据，如下所示：

Hi, My name is {{{name}}}. ...

你去！现在，标题标记已正确呈现。名称以斜体显示。

有条件的助手

车把支持条件助手 （或也称为条件功能）。此功能是车把的独有功能，在小胡子中不可用。如果数据值为空，则条件帮助器有助于防止呈现数据。例如，让我们从age数据中删除该值。

var dataSource = {
"name": "Joe Bloggs",
    "age": "",
    "from": "United Kingdom"
}

我们以这种方式使用条件帮助器。由于年龄值不存在，因此我们不会显示表示I'm {{age}}, 。

{{#if age}}I'm {{age}},{{/if}}

在浏览器中，将渲染以上行。

此外，如果使用undefined或false显式指定了值，则Handlebars还将授予数据为空。

循环

车把也支持循环。与其他编程语言一样，它用于迭代一系列对象。此时，我们只有一个包含三行数据的对象。让我们用另外两个对象扩展我们的示例，就像这样。

var data = [{
    "name" : "Joe Bloggs",
    "age"  : "19",
    "from" : "United Kingdom"
}, {
    "name" : "Jane Doe",
    "age"  : "21",
    "from" : "United State"
}, {
    "name" : "John Doe",
    "age"  : "20",
    "from" : "United Nation"
}];

由于我们现在有多个对象。我们当前的模板将无法再将这些数据呈现到模板中。在这种情况下，我们必须使用Handlebars Loop，将模板包装在{{#each}} ... {{/each}} 。如果需要，我们也可以更改模板。

在此示例中，我们将在列表中显示这些数据。

<script id="template" type="text/x-handlebars-template">
    <ul>
        {{#each this}}
        <li>Hi, My name is {{{name}}}. {{#if age}}I&#039;m {{age}},{{/if}} and I&#039;m from {{from}}</li>
        {{/each}}
    </ul>
</script>

这是我们将在浏览器中看到的结果。

例

现在让我们在一个真实的例子中实现它。这次，我们希望显示来自Forrst的个人资料，该网站是设计师和开发人员的中心。 Forrst提供了一种简单的方法来检索其数据。在我们的情况下，我们可以使用https://forrst.com/api/v2/users/info?username={username}来检索用户个人资料。我们将在下面获得与此数据类似的内容。

注意：实际数据确实很长。因此，我必须删除其中一些以使其更短。

var forrstProfile = {
    "id": 24606,
    "username": "jimmyliu",
    "name": "Jimmy Liu",
    "url": "http:\/\/forrst.com\/people\/jimmyliu",
    "likes": "11",
    "followers": "10",
    "following": "2",
    "photos": {
        "medium_url": "https:\/\/secure.gravatar.com\/avatar\/3151a9294608c3143551aa265f00bf71.jpg?s=75&d=https:\/\/forrst.com\/assets\/images\/default_75.jpg",
        "small_url": "https:\/\/secure.gravatar.com\/avatar\/3151a9294608c3143551aa265f00bf71.jpg?s=45&d=https:\/\/forrst.com\/assets\/images\/default_45.jpg",
        "thumb_url": "https:\/\/secure.gravatar.com\/avatar\/3151a9294608c3143551aa265f00bf71.jpg?s=25&d=https:\/\/forrst.com\/assets\/images\/default_25.jpg"
    },
    "bio": "<p>A graphic and web designer based in Cupertino, California. Follow me on Twitter <a href=\"http:\/\/twitter.com\/jimmyliu\"><\/a><a href=\"\/people\/jimmyliu\">@jimmyliu<\/a><\/p>\n",
    "is_a": "developer & designer",
};

我们将这些数据放在此模板中。

<div id="forrst" class="forrst-profile">
    <script id="forrst-profile-template" type="text/x-handlebars-template">
        <div class="profile">
            <figure class="avatar">
                <img src="{{photos.medium_url}}" alt="">
            </figure>
            <div class="person">
                <h4 class="person-name"><a href="{{url}}">{{name}}</a></h4>
                <div class="person-bio">{{{bio}}}</div>
            </div>
        </div>
        <div class="social-count">
            <div class="social-item social-posts">
                <div class="heading">Posts</div>
                <div class="counts">{{posts}}</div>
            </div>
            <div class="social-item social-followers">
                <div class="heading">Followers</div>
                <div class="counts">{{followers}}</div>
            </div>
            <div class="social-item social-following">
                <div class="heading">Following</div>
                <div class="counts">{{following}}</div>
            </div>
        </div>
    </script>
</div>

让我们像这样将它们一起编译。

var template = $('#forrst-profile-template').html(); 
    var compile  = Handlebars.compile(template);
    var result   = compile(forrstProfile);
    $('#forrst').html(result);

使用几行CSS，我们可以获得更好的结果。

您可以下载源代码，并从这些链接查看演示。

最终思想

我以前使用jQuery进行模板制作。它认为我做错了，因为我的代码看起来像一团糟。当我们有大量数据时，使用Handlebar来模板化和显示它们会更好，更整洁。因此，我希望这对于您开始使用把手具有良好的参考意义。

翻译自: https://www.hongkiat.com/blog/a-look-into-handlebarsjs/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
handlebars.js_Handlebars.js入门指南

在本文中，我们将研究Handlebars ，这是一个基于MustacheJavaScript模板引擎。它与Moustache具有相同的功能，但具有许多新功能。 Handlebars是一个实用的模板工具，特别是用于以JSON形式显示数据序列，而JSON是今天在Web应用程序API中使用的一种常见数据格式形式。看看这篇介绍性文章，它很好地解释了JSON。在本文中，我们将带您了解Hand...
复制链接

扫一扫