-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
154 lines (133 loc) · 6.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
<title>Backbone.Handlebars</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/solarized_dark.min.css" />
<style>
body {
margin: 0 auto;
margin-top: 120px;
padding: 0 20px;
max-width: 1024px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eee;
color: #444;
}
h1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
padding: 30px 0;
background-color: white;
font-weight: normal;
text-align: center;
z-index: -1;
}
h2 {
padding-bottom: 4px;
border-bottom: solid 1px;
}
a {
color: #08c;
text-decoration: none;
}
ul {
padding-left: 20px;
}
code {
overflow-x: auto;
}
</style>
</head>
<body>
<a href="https://github.com/loicfrering/backbone.handlebars"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<h1>Backbone.Handlebars</h1>
<p><a href="http://loicfrering.github.com/backbone.handlebars/">Backbone.Handlebars</a>
provides a solid integration of Handlebars into Backbone with:
</p>
<ul>
<li>Support for Backbone.Model: <code>{{user.name}}</code> compiles to <code>user.get('name')</code></li>
<li>Support for Backbone.Collection: the <code>each</code> helper is able to iterate through
a Backbone.Collection.</li>
<li>Nested views: <code><h1>User details</h1>{{view UserView model=user}}</code></li>
<li>HandlebarsView: an extended Backbone.View that automate the rendering of your
empowered Handlebars templates.</li>
</ul>
<p>You can refer to the <a href="http://loicfrering.github.com/backbone.handlebars/">project's website</a>
for a nice HTML documentation.
</p>
<p><a href="http://travis-ci.org/loicfrering/backbone.handlebars"><img src="https://secure.travis-ci.org/loicfrering/backbone.handlebars.png" alt="Build Status"></a>
</p>
<h2>Download</h2>
<p>The raw sources can be navigated on <a href="https://github.com/loicfrering/backbone.handlebars">GitHub</a>.
The distributed sources can be found in the <code>dist/</code> directory or
downloaded directly via one of the following links:
</p>
<ul>
<li>Production minified version: <a href="https://raw.github.com/loicfrering/backbone.handlebars/v0.2.1/dist/backbone.handlebars.min.js">backbone.handlebars.min.js (v0.2.1)</a>.</li>
<li>Development version: <a href="https://raw.github.com/loicfrering/backbone.handlebars/v0.2.1/dist/backbone.handlebars.js">backbone.handlebars.js (v0.2.1)</a>.</li>
</ul>
<p>You can also use <a href="http://twitter.github.com/bower/">Bower</a> to install
backbone.handlebars:
</p>
<pre><code>$ bower install backbone.handlebars --save</code></pre>
<h2>Support for Backbone.Model</h2>
<p>Backbone.Handlebars extends Handlebars to support fetching Backbone.Model
attributes through <code>model.get(attribute)</code>:
</p>
<pre><code class="lang-javascript"><span class="keyword">var</span> user = <span class="keyword">new</span> Backbone.Model({name: <span class="string">'World'</span>});
<span class="keyword">var</span> fn = Handlebars.compile(<span class="string">'Hello {{name}}!'</span>);
fn(user);
<span class="comment">// Hello World!</span></code></pre>
<p>Notice that we directly pass the user as context and not <code>user.toJSON()</code>.
Instead of using the dot notation <code>user.name</code>, it will detect that we are
managing a Backbone.Model and use <code>user.get('name')</code>.
</p>
<h2>Support for Backbone.Collection</h2>
<p>Backbone.Handlebars override the default <code>each</code> helper to support looping
through a Backbone.Collection:
</p>
<pre><code class="lang-javascript"><span class="keyword">var</span> numbers = <span class="keyword">new</span> Backbone.Collection([<span class="string">'one'</span>, <span class="string">'two'</span>, <span class="string">'three'</span>, <span class="string">'four'</span>]);
<span class="keyword">var</span> fn = Handlebars.compile(<span class="string">'<ul>{{#each numbers}}<li>{{number}}</li>{{/each}}</ul>'</span>);
fn({numbers: numbers});
<span class="comment">// <ul><li>one</li><li>two</li><li>three</li><li>four</li></ul></span></code></pre>
<h2>HandlebarsView and Nested Views</h2>
<pre><code class="lang-javascript"><span class="keyword">var</span> User = Backbone.Model.extend();
<span class="keyword">var</span> AppView = Backbone.HandlebarsView.extend({
template: <span class="string">'<h1>Hello</h1>{{view "HelloView" model=this}}'</span>
});
<span class="keyword">var</span> HelloView = Backbone.HandlebarsView.extend({
template: <span class="string">'Hello {{name}}'</span>
});
<span class="keyword">var</span> app = <span class="keyword">new</span> AppView({model: <span class="keyword">new</span> User({name: <span class="string">'Loïc'</span>})});
app.render().$el.appendTo(<span class="string">'#app'</span>);</code></pre>
<h2>Tests</h2>
<p>Backbone.Handlebars is <a href="https://github.com/loicfrering/backbone.handlebars/tree/master/test">tested</a>,
you can see its <a href="test/">test suite running online</a>. Also, <a href="https://travis-ci.org/">Travis
CI</a> takes care of continuously running this test suite:
<a href="http://travis-ci.org/loicfrering/backbone.handlebars"><img src="https://secure.travis-ci.org/loicfrering/backbone.handlebars.png" alt="Build Status"></a>.
</p>
<h2>Changelog</h2>
<h3>0.2.1</h3>
<ul>
<li>Update Bower dependencies.</li>
</ul>
<h3>0.2.0</h3>
<ul>
<li>Internal refactoring of nested views management.</li>
<li>Support path notation for nested views lookup: <code>{{view "My.Deep.View"}}</code>.</li>
</ul>
<h3>0.1.0</h3>
<ul>
<li>Initial backbone.handlebars release.</li>
</ul>
<h2>License</h2>
<p>Copyright (c) 2013 <a href="https://github.com/loicfrering">Loïc Frering</a>, licensed
under the MIT license. See the LICENSE file for more informations.
</p>
</body>
</html>