当前位置： 首页 > 编程日记 > 正文

自行车车把会吧车刮坏吗_花10分钟即可开始使用车把

编程日记 2024-08-05 23:00:00

自行车车把会吧车刮坏吗

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/

自行车车把会吧车刮坏吗


https://www.dkcj.cn/info/12989.html

相关文章：

每天一个linux命令（33）：df 命令

linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少空间&#xff0c;目前还剩下多少空间等信息。 1&#xff0e;命令格式&#xff1a; df [选项] [文件] 2&#xff0e;命令功能&#xff1a; 显示指定磁盘文件的可用…

编程日记2024/08/05 22:50:00

一：HDFS 用户指导

1.hdfs的牛逼特性 Hadoop, including HDFS, is well suited for distributed storage and distributed processing using commodity hardware. It is fault tolerant, scalable, and extremely simple to expand. MapReduce, well known for its simplicity and applicability …

编程日记2024/08/05 22:40:00

uni-app 封装企业微信config

第一步&#xff0c;在项目根目录加一个html文件&#xff0c; index.html 代码如下&#xff1a; <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"I…

编程日记2024/08/05 22:30:00

sqoop架构_SQOOP架构的深入介绍

sqoop架构by Jayvardhan Reddy通过杰伊瓦尔丹雷迪(Jayvardhan Reddy) SQOOP架构的深入介绍 (An in-depth introduction to SQOOP architecture) Apache Sqoop is a data ingestion tool designed for efficiently transferring bulk data between Apache Hadoop and structure…

编程日记2024/08/05 22:20:00

JS实现录音，播放完整代码带示例图

效果图&#xff1a; 实现代码&#xff1a; <!DOCTYPE html> <html><head><script src"recorder.js" type"text/javascript" charset"utf-8"></script><meta name"viewport" content"widthdevi…

编程日记2024/08/05 22:10:00

r.json()

requests模块中&#xff0c;r.json()为Requests中内置的JSON解码器 其中只有response返回为json格式时&#xff0c;用r.json()打印出响应的内容&#xff0c; 如果response返回不为json格式&#xff0c;使用r.json()会报错 报错内容&#xff1a;ValueError: Expecting property …

编程日记2024/08/05 22:00:00

冒泡排序语法树

转载于:https://www.cnblogs.com/alfredzhu/p/4939268.html

编程日记2024/08/05 21:50:00

valve 的设计_向Valve Portal开发人员学习游戏设计原则

valve 的设计In this talk, Valve programers who created the game Portal discuss problems they faced in development and how they solved them. Leaning about how they solved Portal problems can give you insight into how to design better games.在本次演讲中&…

编程日记2024/08/05 21:40:00

Android之控件使用

Android系统为我们提供了大量的控件&#xff0c;例如&#xff1a;开关控件、单选按钮、多选按钮、单选菜单等等&#xff0c;那么这些控件如何使用呢&#xff1f;本篇我将带领大家一道学习一下如何使用这些控件。所谓无图无真相&#xff0c;先让大家看一下效果图&#xff1a; 下…

编程日记2024/08/05 21:30:00

《对软件工程课程的期望》

要学习到的能力的预期&#xff1a;要学会个人&#xff0c;结对&#xff0c;团队的代码编辑流程&#xff0c;学会和别人进行交流。 对项目课程的期望&#xff1a;希望不是枯燥的代码详解。 对项目的愿景规划&#xff1a;希望团队里的每个人都能学到有用的知识。转载于:https://w…

编程日记2024/08/05 21:20:00

HTML发送语音，上传音频PHP接收

实现需求&#xff1a;网页录制音频上传给后端接收&#xff0c;接收后PHP把文件的名字存到数据库的表里面&#xff0c;这里我的后端用的是PHP&#xff0c;并且把代码贴出来了。 前端实现代码&#xff1a; <!DOCTYPE HTML> <html><head><meta http-equiv&q…

编程日记2024/08/05 21:10:00

html:漂亮的原生表格_HTML表格：关于它们的所有知识

html:漂亮的原生表格by Alexander Gilmanov亚历山大吉尔马诺夫(Alexander Gilmanov) HTML表格&#xff1a;关于它们的所有知识 (HTML Tables: All there is to know about them) Judging by the fact that we created wpDataTables, it’s no secret that we like tables. So …

编程日记2024/08/05 21:00:00

[BZOJ] 1606: [Usaco2008 Dec]Hay For Sale 购买干草

1606: [Usaco2008 Dec]Hay For Sale 购买干草 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1335 Solved: 989[Submit][Status][Discuss]Description 约翰遭受了重大的损失&#xff1a;蟑螂吃掉了他所有的干草&#xff0c;留下一群饥饿的牛&#xff0e;他乘着容量为C(1≤C≤…

编程日记2024/08/05 20:50:00

PHP TP5框架 安装运行 Warning: require(E:\phpstudy_pro\WWW\TP5\tp5\public/../thinkphp/base.php): failed to

创建一个新的项目&#xff1a;进入项目的根目录执行 git 命令&#xff1a; 先执行 git clone -b 5.1 https://git.coding.net/liu21st/thinkphp5.git tp5 进入 tp5目录 cd tp5再执行 git clone -b 5.1 https://git.coding.net/liu21st/framework.git thinkphp 执行更新框…

编程日记2024/08/05 20:40:00

python之模块base64

# -*- coding: cp936 -*- #python 27 #xiaodeng>>> help(base64) #用来作base64编码解码 FUNCTIONS #函数(功能) •b16decode(s, casefoldFalse)Decode a Base16 encoded string. #解码 decode_stringbase64…

编程日记2024/08/05 20:30:00

github pages_使用GitHub Pages和Lighthouse增强您的开发人员产品组合

github pagesFor someone who is trying to break into software development, it doesn’t matter where you look — LinkedIn, career advice boards, youtube tutorials — the advice is always the same: you need a portfolio. freeCodeCamp knows this advise, and the…

编程日记2024/08/05 20:20:00

Angular 4+ HttpClient

个人博客迁移至 http://www.sulishibaobei.com 处&#xff1b; 这篇&#xff0c;算是上一篇Angular 4 Http的后续&#xff1b; Angular 4.3.0-rc.0 版本已经发布?。在这个版本中&#xff0c;我们等到了一个令人兴奋的新功能 - HTTPClient API 的改进版本&#xff1b; HttpCli…

编程日记2024/08/05 20:10:00

PHP TP5入门 二：写接口，添加控制器并访问

默认访问地址&#xff1a;http://localhost/TP5/tp5/public/index.php/index/hello_world 实现代码&#xff1a; <?php namespace app\index\controller;class HelloWorld {public function index(){return 22hello&#xff0c;world&#xff01;;} } 添加一个控制器如…

编程日记2024/08/05 20:00:00

Possion 分布

泊松分布的概率函数为&#xff1a; \[P(Xk)\frac{\lambda^k}{k!}e^{-\lambda},k0,1,2,\cdots\] 如果 $X_i \sim P(\lambda_i)$,并且 互相独立&#xff0c;那么: \[Y\left( \sum\limits_{i1}^n{X_i} \right) \sim P \left( \sum\limits_{i1}^n{\lambda_i} \right)\] 从上面公式…

编程日记2024/08/05 19:50:00

如何使您的Kotlin Android动画可访问

When researching examples for a first ever Android contribution, few examples existed for animations written in Kotlin. There were also few code examples of accessibility considerations within native animations.在研究有史以来第一个Android贡献的示例时&#…

编程日记2024/08/05 19:40:00

指针空间的申请与释放

一、malloc()和free()的基本概念以及基本用法&#xff1a; 1、函数原型及说明&#xff1a; void *malloc(long NumBytes)&#xff1a;该函数分配了NumBytes个字节&#xff0c;并返回了指向这块内存的指针。如果分配失败&#xff0c;则返回一个空指针&#xff08;NULL&#xff0…

编程日记2024/08/05 19:30:00

UIGraphicsBeginImageContext - 位图上下文

UIGraphicsBeginImageContext 首先&#xff0c;先来认识一个UIGraphicsBeginImageContext&#xff0c;它会创建一个基于位图的上下文(context)&#xff08;默认创建一个透明的位图上下文&#xff09;,并将其设置为当前上下文。 位图图形上下文UIKit是不会负责创建的&#xff0c…

编程日记2024/08/05 19:20:00

小程序双击事件

代码&#xff1a; <button data-time"{{lastTapTime}}" data-title"标题" bindtap"doubleClick">双击</button> js data: {lastTapTime:0,}, doubleClick: function (e) {var curTime e.timeStampvar lastTime e.currentTarget…

编程日记2024/08/05 19:10:00

快速了解Kubernetes微服务中的通信

by Adam Henson亚当汉森(Adam Henson) 快速了解Kubernetes微服务中的通信 (A quick look at communication in Kubernetes microservices) “服务”概念和一个Node.js示例 (The “service” concept and a Node.js example) Based on complexity, a layer of microservices ca…

编程日记2024/08/05 19:00:00

连接 linux服务器

操作步骤&#xff1a; xshell 下载 https://xshell.en.softonic.com/ 点击下载后&#xff0c;会有邮箱验证&#xff0c;点击验证通过就会自动下载&#xff0c;然后安装就行。 打开工具&#xff0c;点击新建会话 然后 浏览文件后直接点击确认&#xff0c;出来这样就登录成功了…

编程日记2024/08/05 18:50:00

【bzoj3924】[Zjoi2015]幻想乡战略游戏 动态点分治

题目描述 傲娇少女幽香正在玩一个非常有趣的战略类游戏&#xff0c;本来这个游戏的地图其实还不算太大&#xff0c;幽香还能管得过来&#xff0c;但是不知道为什么现在的网游厂商把游戏的地图越做越大&#xff0c;以至于幽香一眼根本看不过来&#xff0c;更别说和别人打仗了。 …

编程日记2024/08/05 18:40:00

面试题05-UI控件

怎么解决缓存池满的问题(cell)ios中不存在缓存池满的情况&#xff0c;因为通常我们ios中开发&#xff0c;对象都是在需要的时候才会创建&#xff0c;有种常用的说话叫做懒加载&#xff0c;还有在UITableView中一般只会创建刚开始出现在屏幕中的cell&#xff0c;之后都是从缓存池…

编程日记2024/08/05 18:30:00

全球链界科技发展大会_如何成为科技界的团队合作者

全球链界科技发展大会by Ofer Vugman由Ofer Vugman 如何成为科技界的团队合作者 (How to be a team player in the tech world) 这些技巧将增进您的关系并提高团队的工作效率 (These tips will boost your relationships and your team’s efficiency at work) When I landed …

编程日记2024/08/05 18:20:00

linux驱动之i2c子系统mpu6050设备驱动

以下是mpu6050简单的驱动实现&#xff0c;mpu6050是I2C接口的6轴传感器&#xff0c;可以作为字符设备注册到内核&#xff0c;本代码运行环境是3.4.2内核&#xff0c;4.3.2版本的编译链&#xff0c;12.04版本的Ubuntu&#xff0c;硬件环境是jz2440开发板&#xff1b; 按照之前分…

编程日记2024/08/05 18:10:00

小程序使用富文本完整代码及示例图

先看示例图&#xff1a; 富文本html代码&#xff1a; 效果图&#xff1a; 实现步骤&#xff1a; 1.下载 wxParse代码放到你的小程序项目目录里面 https://github.com/icindy/wxParse 基本使用方法 Copy文件夹wxParse - wxParse/-wxParse.js(必须存在)-html2json.js(必须存在…

编程日记2024/08/05 18:00:00