Skip to content

Commit bd8ea2d

Browse files
authored
Merge pull request #54 from FACN1/helpbranch
just quickly added sources and a sentence
2 parents 256500e + 63ea13a commit bd8ea2d

File tree

1 file changed

+52
-0
lines changed

1 file changed

+52
-0
lines changed

week-7/templating/WhatIsTemplating.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<h1>Templating with helper functions</h1>
2+
3+
<h2> What are helper functions in handlebars? </h2>
4+
5+
<h3> First of all, what are handlebar templates?</h3>
6+
7+
Handlebars templates are just like regular HTML, but also give you the ability to embed expressions that change what is displayed
8+
9+
If you're not using build tools, you can **define** your application's main template inside your HTML by putting it inside a script tag, which is what we just did in this morning challenge when we put **curly brackets** inside the name of the property that we are using from our template, in our case, the first properties that we used were title and post from our sayHello function. This is in our first test, we called title and post from sayhello
10+
11+
These expressions (and the other Handlebars features you will learn about next) are bindings aware. That means that if the values used by your templates ever change, your HTML will be updated automatically.
12+
13+
As your application grows in size, it will have many templates, each bound to different controllers.
14+
15+
which gets us to...
16+
17+
<h3> What are helpers? Why should be used</h3>
18+
19+
Sometimes, you may use the same HTML in your application multiple times. In those cases, you can register a custom helper that can be invoked from any Handlebars template.
20+
21+
For example, imagine you are frequently wrapping certain values in a <span> tag with a custom class. You can register a helper from your JavaScript like this:
22+
```javascript
23+
Ember.Handlebars.helper('highlight', function(value, options) {
24+
25+
var escaped = Handlebars.Utils.escapeExpression(value);
26+
27+
return new Ember.Handlebars.SafeString('<span class="highlight">' + escaped + '</span>');
28+
});
29+
```
30+
Anywhere in your Handlebars templates, you can now invoke this helper:
31+
```
32+
{{highlight name}}
33+
```
34+
and it will output the following:
35+
```
36+
<span class="highlight">Peter</span>
37+
```
38+
39+
Now, whenever the context's person changes, or when any of the dependent keys change, the output will automatically update the DOM with the new value.
40+
41+
42+
43+
44+
nice sources:
45+
46+
https://guides.emberjs.com/v1.10.0/templates/handlebars-basics/
47+
48+
http://handlebarsjs.com/
49+
50+
http://handlebarsjs.com/expressions.html
51+
52+
https://www.sitepoint.com/a-beginners-guide-to-handlebars/

0 commit comments

Comments
 (0)