@@ -17,6 +17,8 @@ FlowRouter Extra:
17
17
* [ data hook] ( https://github.com/VeliovGroup/flow-router#data-hook ) - Fetch data from collection before render router's template
18
18
* [ onNoData hook] ( https://github.com/VeliovGroup/flow-router#onnodata-hook ) - Do something if "* data hook* " returns falsy value
19
19
* [ Data in other hooks] ( https://github.com/VeliovGroup/flow-router#data-in-other-hooks ) - Use fetched data in other hooks
20
+ * [ Render Template] ( https://github.com/VeliovGroup/flow-router#render-template ) - Render template into layout
21
+ * [ Templating] ( https://github.com/VeliovGroup/flow-router#templating ) - Construct your layout and templates
20
22
* [ Suggested usage] ( https://github.com/VeliovGroup/flow-router#suggested-usage ) - Bootstrap router's configuration
21
23
* [ Other packages compatibility] ( https://github.com/VeliovGroup/flow-router#other-packages-compatibility ) - Best packages to be used with flow-router-extra
22
24
@@ -59,7 +61,7 @@ FlowRouter.route('/post/:_id', {
59
61
return [Meteor .subscribe (' post' , params ._id )];
60
62
},
61
63
whileWaiting : function (params , queryParams ) {
62
- BlazeLayout .render (' _layout' , {content : ' _loading' } );
64
+ this .render (' _layout' , ' _loading' );
63
65
}
64
66
});
65
67
```
@@ -73,7 +75,7 @@ FlowRouter.route('/post/:_id', {
73
75
return [Meteor .subscribe (' post' , params ._id )];
74
76
},
75
77
whileWaiting : function () {
76
- BlazeLayout .render (' _layout' , {content : ' _loading' } );
78
+ this .render (' _layout' , ' _loading' );
77
79
},
78
80
data : function (params , queryParams ) {
79
81
return PostsCollection .findOne ({_id: params ._id });
@@ -85,8 +87,8 @@ When you having `data` hook in a route, - returned data will be passed to `actio
85
87
``` javascript
86
88
FlowRouter .route (' /post/:_id' , {
87
89
name: ' post' ,
88
- action : function (params , queryParams , data ) {
89
- BlazeLayout .render (' _layout' , {content : ' post' , post: data });
90
+ action : function (params , queryParams , post ) {
91
+ this .render (' _layout' , ' post' , { post: post });
90
92
},
91
93
waitOn : function (params ) {
92
94
return [Meteor .subscribe (' post' , params ._id )];
@@ -116,7 +118,7 @@ FlowRouter.route('/post/:_id', {
116
118
return PostsCollection .findOne ({_id: params ._id });
117
119
},
118
120
onNoData : function (params , queryParams ){
119
- BlazeLayout .render (' _layout' , {content : ' _404' } );
121
+ this .render (' _layout' , ' _404' );
120
122
}
121
123
});
122
124
```
@@ -138,25 +140,127 @@ FlowRouter.route('/post/:_id', {
138
140
});
139
141
```
140
142
143
+ ### Render Template
144
+ * Instead of BlazeLayout, you can use build-in * ` this.render() ` * method* . Use it in context of ` action ` , ` onNoData ` , ` whileWaiting ` , ` data ` , ` waitOn ` or any other hook.
145
+
146
+ ` this.render(layout, template [, data]) `
147
+ - ` layout ` {* String* } - Name of layout template (* which has * ` yield ` )
148
+ - ` template ` {* String* } - Name of template (* which will be rendered into yield* )
149
+ - ` data ` {* Object* } - [ Optional] Object of data context to use in template. * This object supports reactive data sources, but only when handled by "yielded" template, not nested templates, otherwise use template helpers*
150
+
151
+ ### Templating
152
+ * In order to use build-in* ` this.render() ` * method, layout template must contain* ` yield ` * placeholder*
153
+ ``` html
154
+ <!-- layout.html: -->
155
+ <head >
156
+ <meta charset =" UTF-8" />
157
+ <meta name =" fragment" content =" !" />
158
+ <!-- ... -->
159
+ <title >My Title</title >
160
+ </head >
161
+
162
+ <template name =" _layout" >
163
+ <header >
164
+ {{> header}}
165
+ </header >
166
+
167
+ <section >
168
+ {{> yield}}
169
+ </section >
170
+
171
+ <footer >
172
+ {{> footer}}
173
+ </footer >
174
+ </template >
175
+
176
+ <template name =" header" >
177
+ <h1 >My Page</h1 >
178
+ </template >
179
+
180
+ <template name =" footer" >
181
+ <p ><!-- ... --> </p >
182
+ </template >
183
+ ```
184
+
185
+ ``` html
186
+ <!-- posts.html: -->
187
+ <template name =" posts" >
188
+ <ul >
189
+ {{#each post in posts}}
190
+ <li >
191
+ <a href =" /post/{{post._id}}" >{{post.title}}</a >
192
+ </li >
193
+ {{/each}}
194
+ </ul >
195
+ </template >
196
+ ```
197
+
198
+ ``` html
199
+ <!-- post.html: -->
200
+ <template name =" post" >
201
+ {{#with post}}
202
+ <h3 >{{title}}</h3 >
203
+ <article >
204
+ {{{text}}}
205
+ </article >
206
+ {{/with}}
207
+ </template >
208
+ ```
209
+
210
+ ``` javascript
211
+ // routes.js
212
+ FlowRouter .route (' /posts' , {
213
+ name: ' posts' ,
214
+ action : function (params , queryParams , posts ) {
215
+ this .render (' _layout' , ' posts' , posts);
216
+ },
217
+ waitOn : function () {
218
+ return [Meteor .subscribe (' posts' )];
219
+ },
220
+ data : function () {
221
+ return PostsCollection .find ({});
222
+ }
223
+ });
224
+
225
+ FlowRouter .route (' /post/:_id' , {
226
+ name: ' posts' ,
227
+ action : function (params , queryParams , post ) {
228
+ this .render (' _layout' , ' post' , post);
229
+ },
230
+ waitOn : function (params ) {
231
+ return [Meteor .subscribe (' post' , params ._id )];
232
+ },
233
+ data : function (params ) {
234
+ return PostsCollection .findOne ({_id: params ._id });
235
+ }
236
+ });
237
+ ```
238
+
141
239
### Suggested usage
142
240
As example we took simple post route:
143
241
``` javascript
242
+ // meteorhacks:subs-manager package
243
+ var subsManager = new SubsManager ();
244
+
144
245
FlowRouter .route (' /post/:_id' , {
145
246
name: ' post' ,
146
247
action : function (params , queryParams , data ) {
147
248
// Pass data to template's context
148
249
// No need to create helpers
149
- BlazeLayout .render (' _layout' , {content : ' post' , post: data});
250
+ this .render (' _layout' , ' post' , { post: data});
150
251
},
151
252
waitOn : function (params ) {
152
253
// meteorhacks:subs-manager package
153
254
return [subsManager .subscribe (' post' , params ._id )];
154
255
},
256
+ whileWaiting : function () {
257
+ this .render (' _layout' , ' _loading' );
258
+ },
155
259
data : function (params ) {
156
260
return PostsCollection .findOne ({_id: params ._id });
157
261
},
158
262
onNoData : function (){
159
- BlazeLayout .render (' _layout' , {content : ' _404' } );
263
+ this .render (' _layout' , ' _404' );
160
264
},
161
265
// ostrio:flow-router-title package
162
266
title : function (params , queryParams , post ) {
@@ -167,7 +271,7 @@ FlowRouter.route('/post/:_id', {
167
271
FlowRouter .notFound = {
168
272
title: ' 404: Page not found' ,
169
273
action : function () {
170
- BlazeLayout .render (' _layout' , {content : ' _404' } );
274
+ this .render (' _layout' , ' _404' );
171
275
}
172
276
};
173
277
0 commit comments