forked from platanus/angular-restmod
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtutorial-building.html
More file actions
326 lines (248 loc) · 10.4 KB
/
Copy pathtutorial-building.html
File metadata and controls
326 lines (248 loc) · 10.4 KB
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>restmod tutorialbuilding</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-fixed-top ">
<div class="navbar-inner">
<a class="brand" href="index.html">restmod</a>
<ul class="nav">
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="BuilderApi.html">BuilderApi</a>
</li>
<li>
<a href="CollectionApi.html">CollectionApi</a>
</li>
<li>
<a href="CommonApi.html">CommonApi</a>
</li>
<li>
<a href="DefaultPacker.html">DefaultPacker</a>
</li>
<li>
<a href="ExtendedApi.html">ExtendedApi</a>
</li>
<li>
<a href="ExtendedBuilderApi.html">ExtendedBuilderApi</a>
</li>
<li>
<a href="FastQ.html">FastQ</a>
</li>
<li>
<a href="ListApi.html">ListApi</a>
</li>
<li>
<a href="PackerCache.html">PackerCache</a>
</li>
<li>
<a href="RecordApi.html">RecordApi</a>
</li>
<li>
<a href="RelationBuilderApi.html">RelationBuilderApi</a>
</li>
<li>
<a href="RelationScope.html">RelationScope</a>
</li>
<li>
<a href="restmod.html">restmod</a>
</li>
<li>
<a href="restmodProvider.html">restmodProvider</a>
</li>
<li>
<a href="RMBuilderComputedApi.html">RMBuilderComputedApi</a>
</li>
<li>
<a href="ScopeApi.html">ScopeApi</a>
</li>
<li>
<a href="StaticApi.html">StaticApi</a>
</li>
<li>
<a href="Utils.html">Utils</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="mixins.list.html" class="dropdown-toggle" data-toggle="dropdown">Mixins<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="DebouncedModel.html">DebouncedModel</a>
</li>
<li>
<a href="DirtyModel.html">DirtyModel</a>
</li>
<li>
<a href="FindMany.html">FindMany</a>
</li>
<li>
<a href="NestedDirtyModel.html">NestedDirtyModel</a>
</li>
<li>
<a href="PagedModel.html">PagedModel</a>
</li>
<li>
<a href="Preload.html">Preload</a>
</li>
<li>
<a href="SharedModel.html">SharedModel</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="tutorials.list.html" class="dropdown-toggle" data-toggle="dropdown">Tutorials<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="tutorial-building.html">building</a>
</li>
<li>
<a href="tutorial-hooks.html">hooks</a>
</li>
<li>
<a href="tutorial-integration.html">integration</a>
</li>
<li>
<a href="tutorial-styles.html">styles</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="global.html#dummy">dummy</a>
</li>
<li>
<a href="global.html#list">list</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="main">
<section>
<header>
<h2>building</h2>
</header>
<article>
<p>Model building in restmod is done via the <code>restmod</code> service.</p>
<p>The service provides two methods: <code>model</code> is used to build new models and <code>mixin</code> to build mixins. More on <strong>mixins</strong> later.</p>
<h2>Simple model building</h2>
<p>Basic model building looks like this</p>
<pre><code class="lang-javascript">angular.module('test').factory('MyModel', function(restmod) {
return restmod.model('/model-base-url');
});</code></pre>
<p>It's recommended to put models inside factories, this is usefull later when defining relations and inheritance, since the angular $injector is used by these features. It's also the angular way of doing things. This guide will skip the factory code in examples for simplicity sake.</p>
<p>The first and only required parameter is the base url for the model, if null is given then the model is considered nested.</p>
<p>Nested models can only be fetched/created/updated when bound to other models (using a relation).</p>
<p>Refer to model for information about how to use the generated model.</p>
<h2>Advanced model building</h2>
<p>Restmod offers two ways of customizing a model's behaviour, <strong>definition blocks</strong> and <strong>definition objects</strong>, both are used by passing the required parameters to the <code>Model.mix</code> static method.</p>
<h3>Model definition blocks</h3>
<p>If a function is given to <code>model</code>, then the function is called in the builder context (<code>this</code> points to the builder).</p>
<pre><code class="lang-javascript">restmod.model('/model-base-url').mix(function() {
this.attrMask('createdBy', 'R') // Set an attribute mask
.attrDefault('createdBy', 'This is read only') // Set an attribute default value
.on('before-save', function() { // Set a model hook
alert('model will be saved!')
});
});</code></pre>
<p>Even though the preferred way of customizing a model is using the definition object, some builder methods like <code>extend</code>can only be accesed through the builder context.</p>
<p>For more information about available builder functions check the ModelBuilder class documentation.</p>
<h3>The model definition object</h3>
<p>It is also posible to provide an plain object to the <code>model</code> method. This object will be treated as a model definition.</p>
<p>A model assigns one or more modifiers to model instance properties.</p>
<pre><code class="lang-javascript">restmod.model('api/bikes').mix({
created_at: { serialize: 'RailsDate' }, // set a serializer
createdBy: { init: 'This is readonly', mask: 'R' }, // set a default value and a mask
parts: { hasMany: 'Part' } // set a relation with another model built by a factory called 'Part'
});</code></pre>
<p>Property modifiers map directly to builder DSL functions, so using</p>
<pre><code class="lang-javascript">restmod.model('').mix({
prop: { init: 20 }
});</code></pre>
<p>Is equivalent to</p>
<pre><code class="lang-javascript">restmod.model('').mix(function() {
this.attrDefault('prop', 20);
}</code></pre>
<p>For more information about available property modifiers check the <a href="BuilderApi.html">BuilderApi</a> documentation.</p>
<p>Some plugins also add additional modifiers.</p>
<p>Property modifiers map directly to builder DSL methods, but not every builder method is available as a property behavior modifier. The model definition object only provides a subset of the available builder DSL methods.</p>
<h3>The mixin chain</h3>
<p>You are not restricted to use only one building method, multiple object and function blocks can be passed to the <code>mix</code> function and are processed sequentially by the builder. This is called the mixin chain.</p>
<p>In addition to definition objects and functions, the mixin chain also allows for model or mixin names, if a name is given, the model/mixin is looked up using the injector and its mixin chain is injected in the current chain.</p>
<pre><code class="lang-javascript">// Example using multiple mixins
restmod.model('api/bikes').mix('Vehicle', // inject Vehicle mixin chain first
// Then a model definition object
{
brakes: { serialize: 'Brakes' },
},
// Finally a model definition block
function() {
this.on('before-create', function() {
});
})</code></pre>
<h4>The global mixin chain</h4>
<p>It is also posible to define a common mixin chain for all models in the application, this is done using the <code>rebase</code> method available at the restmodProvider provider in the configuration stage.</p>
<h3>Extending the DSL</h3>
<p><strong>UNDER CONSTRUCTION</strong></p>
<p>DSL extension is done using the mixin mechanism and the <code>extend</code> builder method.</p>
<p>For example, building a simple extension will look like this:</p>
<p>The using the extension is only a matter of putting the extension's mixin in a model's mixin chain (before it is used).</p>
<p><strong>UNDER CONSTRUCTION</strong></p>
</article>
</section>
</div>
<div class="clearfix"></div>
<footer>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a>
on Wed Feb 18 2015 20:30:54 GMT-0300 (CLST) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>
</div>
<br clear="both">
</div>
</div>
<script src="scripts/sunlight.js"></script>
<script src="scripts/sunlight.javascript.js"></script>
<script src="scripts/sunlight-plugin.doclinks.js"></script>
<script src="scripts/sunlight-plugin.linenumbers.js"></script>
<script src="scripts/sunlight-plugin.menu.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.scrollTo.js"></script>
<script src="scripts/jquery.localScroll.js"></script>
<script src="scripts/bootstrap-dropdown.js"></script>
<script src="scripts/toc.js"></script>
<script> Sunlight.highlightAll({lineNumbers:true, showMenu: true, enableDoclinks :true}); </script>
<script>
$( function () {
$( "#toc" ).toc( {
selectors : "h1,h2,h3,h4",
showAndHide : false,
scrollTo : 60
} );
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
} );
</script>
</body>
</html>