You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _posts/2012-02-25-backbone-tips-from-document-cloud.markdown
+30-17Lines changed: 30 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -101,9 +101,11 @@ la partie chargement des scripts :
101
101
102
102
Comme notre index.html est tout vide, il nous faudra gérer nos templates dans des fichiers séparés.
103
103
104
-
(J'ouvre une parenthèse, mais je préfère gérer mes templates HTML dans des fichiers séparés plutôt que de les inclure dans des balises script dans index.html)
104
+
(J'ouvre une parenthèse, mais je préfère gérer mes templates HTML dans des fichiers séparés plutôt que de les
105
+
inclure dans des balises script dans index.html)
105
106
106
-
Ce qu'il nous faut, c'est créer un fichier HTML, qui sera ensuite compilé en une fonction javascript, ce qui nous permettra de récupérer le texte dans notre application.
107
+
Ce qu'il nous faut, c'est créer un fichier HTML, qui sera ensuite compilé en une fonction javascript,
108
+
ce qui nous permettra de récupérer le texte dans notre application.
107
109
108
110
Je m'explique. Prenons un template `hello-world.jst`
109
111
@@ -119,7 +121,8 @@ window.JST = {
119
121
}
120
122
{% endhighlight %}
121
123
122
-
Il nous suffira de rajouter `<script src="template/templates.js"></script>` dans index.html et nous pourrons accéder à notre template n'importe où dans l'application à l'aide du namespace JST.
124
+
Il nous suffira de rajouter `<script src="template/templates.js"></script>` dans index.html et nous pourrons
125
+
accéder à notre template n'importe où dans l'application à l'aide du namespace JST.
123
126
124
127
{% highlight javascript %}
125
128
$(function(){
@@ -128,9 +131,11 @@ $(function(){
128
131
{% endhighlight %}
129
132
130
133
Mantenant vous avez compris le principe des JST. Si jamais ce n'est pas le cas,
131
-
lisez cet article là <http://ricostacruz.com/backbone-patterns/#jst_templates>, ou les liens ci dessous.
134
+
lisez cet article <http://ricostacruz.com/backbone-patterns/#jst_templates>, ou les liens ci dessous.
132
135
133
-
Il existe de nombreuses solutions pour faire du JST dans votre application, mais, si vous souhaitez quelque chose qui fonctionne avec n'importe quel template (underscore template, jquery-tmpl, handlebars, des strings pures) jetez un oeil à ce projet <https://github.com/Filirom1/universal-jst> #auto-promotion :)
136
+
Il existe de nombreuses solutions pour faire du JST dans votre application, mais, si vous souhaitez quelque chose
137
+
qui fonctionne avec n'importe quel template (underscore template, jquery-tmpl, handlebars, des strings pures)
138
+
jetez un oeil à ce projet <https://github.com/Backbonist/universal-jst> #auto-promotion :)
134
139
135
140
Sinon regardez les projets ci dessous :
136
141
@@ -143,7 +148,8 @@ Sinon regardez les projets ci dessous :
143
148
144
149
### Utilisation d'un Namespace
145
150
146
-
Trouvez un nom court pour votre namespace qui n'est pas un mot clé réservé. Par exemple, DocumentCloud à choisi d'utiliser ses initiales : `dc`
151
+
Trouvez un nom court pour votre namespace, qui n'est pas un mot clé réservé.
152
+
Par exemple, DocumentCloud à choisi d'utiliser ses initiales : `dc`
147
153
148
154
On défini le namespace au tout début de notre application, afin de
149
155
pouvoir l'utiliser n'importe où par la suite.
@@ -160,7 +166,7 @@ pouvoir l'utiliser n'importe où par la suite.
160
166
})();
161
167
{% endhighlight %}
162
168
163
-
Comme nous allons découper notre application en plein de petits fichiers,
169
+
Comme nous allons découper notre application en un ensemble de petits fichiers,
164
170
nous allons augmenter ce namespace dans chaque fichier:
En plus comme chacun de nos fichiers est contenu dans un objet, on ne risquera pas de pourrire la globale window ;)
197
+
En plus, comme chacun de nos fichiers est contenu dans un objet, on ne risquera pas de pourrire la globale window ;)
192
198
Plus besoin d'entourer notre code dans un fonction auto appelante :
193
199
194
200
{% highlight javascript %}
@@ -198,11 +204,10 @@ Plus besoin d'entourer notre code dans un fonction auto appelante :
198
204
})()
199
205
{% endhighlight %}
200
206
201
-
De plus maintenant, chacun de nos objets est facilement accessible via la console.
207
+
De plus, nos objets sont facilement accessibles via la console, ce qui est très pratique pour débugguer.
202
208
203
209
$ console.log(new dc.model.Document());
204
210
205
-
Ce qui est très pratique pour débugguer.
206
211
207
212
Comme vous allez beaucoup écrire ce namespace (ici `dc`), je vous conseil de choisir quelque chose de court. Deux lettres c'est bien.
208
213
@@ -213,22 +218,28 @@ Une des difficultés en Javascript c'est la gestion des dépendances entre les f
213
218
214
219
Dans le cas de notre application, il y a 2 sortes de dépendances :
215
220
216
-
* à la lecture du fichier, les variables doivent être connu par l'interpréteur JavaScript.
221
+
* à la lecture du fichier, les variables doivent être connues par l'interpréteur JavaScript.
217
222
218
-
Comme nos fichiers commenceront tous par `dc.xxx.xxxx = Backbone.XXXXX.extend({`, il sera facile pour nous de gérer l'ordre dans l'index.html afin qu'il n'y ai pas de problèmes de dépendances.
223
+
Comme nos fichiers commenceront tous par `dc.xxx.xxxx = Backbone.XXXXX.extend({`, il sera facile pour nous de
224
+
gérer l'ordre dans l'index.html afin qu'il n'y ai pas de problèmes de dépendances.
219
225
220
226
Les dépendances qui se trouvent à l'intérieur des fonctions (initialize, render...) seront résolues plus tard.
221
227
222
228
223
229
* lors de l'instantiation, si l'on fait appel à un module externe, celui ci doit avoir été instancié préalablement.
224
230
225
-
Je m'explique, nous allons découper notre application en plein de petits fichiers. Une fois instancié ces modules vont communiquer entre eux. Mais on peut faire la distinction entre les modules qui seront utilisés par toute l'application et les modules qui ne seront utilisés que localement.
231
+
Je m'explique, nous allons découper notre application en plein de petits fichiers.
232
+
Une fois instancié, ces modules vont communiquer entre eux. Mais on peut faire la distinction entre les
233
+
modules qui seront utilisés par toute l'application et les modules qui ne seront utilisés que localement.
226
234
227
235
228
236
229
237
#### Dépendances partagées globalement
230
238
231
-
Si on défini un module comme quelque chose pouvant être appelé par n'importe quel autre module dans l'application. Il est important d'instancier ces modules dans un ordre précis (un module peut dépendre d'un autre module), c'est pour cela que l'on instanciera ces modules dans une fichier unique, par exemple le routeur. Ces modules seront accessibles par toute l'application.
239
+
Si on défini un module comme quelque chose pouvant être appelé par n'importe quel autre module dans l'application.
240
+
Il est important d'instancier ces modules dans un ordre précis (un module peut dépendre d'un autre module),
241
+
c'est pour cela que l'on instanciera ces modules dans une fichier unique, par exemple le routeur.
242
+
Ces modules seront accessibles par toute l'application.
@@ -282,15 +293,17 @@ dc.app.router = new dc.app.MyRouter();
282
293
283
294
#### Dépendances partagées hiérarchiquement
284
295
285
-
Dans une application, nous avons toujours besoin de découper des modules en sous modules et donc d'avoir une relation de dépendance entre les deux.
296
+
Dans une application, nous avons toujours besoin de découper des modules en sous modules et donc d'avoir
297
+
une relation de dépendance entre les deux.
286
298
287
-
Mais comme cette relation est du type parent - enfant, ce sera toujours via le module parent que les enfants pourront discuté entre eux ou avec le parent.
299
+
Mais comme cette relation est du type parent - enfant, ce sera toujours via le module parent que les enfants pourront
0 commit comments