Skip to content

Commit 3b9444a

Browse files
author
Vlad Balin
committed
added example
1 parent 91111cc commit 3b9444a

File tree

3 files changed

+51
-51
lines changed

3 files changed

+51
-51
lines changed

‎docs/index.html‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -81,42 +81,41 @@ <h1 id="getting-started">Getting started</h1>
8181
</ul>
8282
<p>The state defined with Type-R classes is deeply observable and serializable by default. While being an advanced JSON serialization engine handling sophisticated scenarios (like cross-collections many-to-many relationships), Type-R is completely unopinionated on the client-server transport protocol.</p>
8383
<p>Type-R is your perfect M and VM in MVVM and MVC architecture imposing no restrictions on V and C parts.</p>
84-
<pre><code><span class="hljs-keyword">import</span> { define, Record } <span class="hljs-keyword">from</span> <span class="hljs-string">'type-r'</span>
84+
<pre><code class="highlight javascript"><span class="hljs-keyword">import</span> { define, Record } <span class="hljs-keyword">from</span> <span class="hljs-string">'type-r'</span>
8585

86+
<span class="hljs-comment">// Define email attribute type with encapsulated validation check.</span>
8687
<span class="hljs-keyword">const</span> Email = <span class="hljs-built_in">String</span>.has.check( <span class="hljs-function"><span class="hljs-params">x</span> =&gt;</span> x! || x.indexOf( <span class="hljs-string">'@'</span> ) &gt;= <span class="hljs-number">0</span>, <span class="hljs-string">'Invalid email'</span> );
8788

8889
@define <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">User</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Record</span> </span>{
8990
<span class="hljs-keyword">static</span> attributes = {
90-
<span class="hljs-attr">name</span> : <span class="hljs-built_in">String</span>.isRequired,
91-
<span class="hljs-attr">email</span> : Email.isRequired
91+
<span class="hljs-attr">name</span> : <span class="hljs-built_in">String</span>.isRequired, <span class="hljs-comment">// should not be empty for the record to be valid.</span>
92+
email : Email.isRequired
9293
}
9394
}
9495

9596
@define <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Message</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Record</span> </span>{
9697
<span class="hljs-keyword">static</span> attributes = {
97-
<span class="hljs-attr">created</span> : <span class="hljs-built_in">Date</span>
98-
author : User,
99-
<span class="hljs-attr">to</span> : User.Collection,
100-
<span class="hljs-attr">subject</span> : <span class="hljs-string">''</span>,
98+
<span class="hljs-attr">created</span> : <span class="hljs-built_in">Date</span> <span class="hljs-comment">// = new Date()</span>
99+
author : User, <span class="hljs-comment">// aggregated User record.</span>
100+
to : User.Collection, <span class="hljs-comment">// aggregating collection of users</span>
101+
subject : <span class="hljs-string">''</span>,
101102
<span class="hljs-attr">body</span> : <span class="hljs-string">''</span>
102103
}
103104
}
104105

105106
<span class="hljs-keyword">const</span> msg = <span class="hljs-keyword">new</span> Message();
106-
assert( !msg.isValid() );
107-
108-
msg.on( <span class="hljs-string">'change'</span>, () =&gt; <span class="hljs-built_in">console</span>.log( <span class="hljs-string">"something is changed!"</span> ) );
107+
assert( !msg.isValid() ); <span class="hljs-comment">// Is not valid because msg.author has empty attributes</span>
109108

110-
msg.transaction( <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
111-
msg.author.name = <span class="hljs-string">'John Dee'</span>;
112-
msg.author.email = <span class="hljs-string">'[email protected]'</span>;
109+
<span class="hljs-comment">// Listen for the changes in aggregation tree...</span>
110+
msg.on( <span class="hljs-string">'change'</span>, () =&gt; <span class="hljs-built_in">console</span>.log( <span class="hljs-string">'change!!!'</span> ) );
113111

114-
assert( msg.isValid() );
115-
});
112+
msg.transaction( <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-comment">// Prepare to make the sequence of changes on msg</span>
113+
msg.author.name = <span class="hljs-string">'John Dee'</span>; <span class="hljs-comment">// No 'change' event yet as we're in the transaction. </span>
114+
msg.author.email = <span class="hljs-string">'[email protected]'</span>;
116115

117-
</code></pre><blockquote>
118-
<p>something is changed!</p>
119-
</blockquote>
116+
assert( msg.isValid() ); <span class="hljs-comment">// Now msg is valid as all of its attributes are valid.</span>
117+
}); <span class="hljs-comment">// Got single 'change!!!' message in the console.</span>
118+
</code></pre>
120119
<h2 id="installation-and-requirements">Installation and requirements</h2>
121120
<p>Is packed as UMD and ES6 module. No peer dependencies are required.</p>
122121
<p><code>npm install type-r --save-dev</code></p>

‎docs/index.md‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -28,40 +28,42 @@ The state defined with Type-R classes is deeply observable and serializable by d
2828

2929
Type-R is your perfect M and VM in MVVM and MVC architecture imposing no restrictions on V and C parts.
3030

31-
import { define, Record } from 'type-r'
31+
```javascript
32+
import { define, Record } from 'type-r'
3233

33-
const Email = String.has.check( x => x! || x.indexOf( '@' ) >= 0, 'Invalid email' );
34+
// Define email attribute type with encapsulated validation check.
35+
const Email = String.has.check( x => x! || x.indexOf( '@' ) >= 0, 'Invalid email' );
3436

35-
@define class User extends Record {
36-
static attributes = {
37-
name : String.isRequired,
38-
email : Email.isRequired
39-
}
37+
@define class User extends Record {
38+
static attributes = {
39+
name : String.isRequired, // should not be empty for the record to be valid.
40+
email : Email.isRequired
4041
}
41-
42-
@define class Message extends Record {
43-
static attributes = {
44-
created : Date
45-
author : User,
46-
to : User.Collection,
47-
subject : '',
48-
body : ''
49-
}
42+
}
43+
44+
@define class Message extends Record {
45+
static attributes = {
46+
created : Date // = new Date()
47+
author : User, // aggregated User record.
48+
to : User.Collection, // aggregating collection of users
49+
subject : '',
50+
body : ''
5051
}
52+
}
5153

52-
const msg = new Message();
53-
assert( !msg.isValid() );
54-
55-
msg.on( 'change', () => console.log( "something is changed!" ) );
54+
const msg = new Message();
55+
assert( !msg.isValid() ); // Is not valid because msg.author has empty attributes
5656

57-
msg.transaction( () => {
58-
msg.author.name = 'John Dee';
59-
msg.author.email = '[email protected]';
57+
// Listen for the changes in aggregation tree...
58+
msg.on( 'change', () => console.log( 'change!!!' ) );
6059

61-
assert( msg.isValid() );
62-
});
63-
> something is changed!
60+
msg.transaction( () => { // Prepare to make the sequence of changes on msg
61+
msg.author.name = 'John Dee'; // No 'change' event yet as we're in the transaction.
62+
msg.author.email = '[email protected]';
6463

64+
assert( msg.isValid() ); // Now msg is valid as all of its attributes are valid.
65+
}); // Got single 'change!!!' message in the console.
66+
```
6567

6668
## Installation and requirements
6769

‎docs/lib/stylesheets/screen.css‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -801,12 +801,9 @@ html, body {
801801
padding-top: 1em;
802802
padding-bottom: 1em;
803803
text-shadow: 0 1px 0 #cecece;
804-
margin-top: 1.5em;
805-
margin-bottom: 1.5em;
806-
margin-left: 28px;
804+
margin: 1em;
807805
background: #c6dde9;
808806
line-height: 1.6;
809-
margin-right: 30px;
810807
border-radius: 3px;
811808
padding-left: 15px;
812809
}
@@ -843,7 +840,6 @@ html, body {
843840
.content pre, .content blockquote {
844841
background-color: #292929;
845842
color: #fff;
846-
padding: 2em 28px;
847843
margin: 0;
848844
clear: right;
849845
-moz-box-sizing: border-box;
@@ -852,6 +848,10 @@ html, body {
852848
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4)
853849
}
854850

851+
.content pre {
852+
padding: 2em 28px;
853+
}
854+
855855
.content pre > p, .content blockquote > p {
856856
margin: 0
857857
}
@@ -864,8 +864,7 @@ html, body {
864864

865865
.content blockquote > p {
866866
background-color: #1c1c1c;
867-
border-radius: 5px;
868-
padding: 13px;
867+
padding: 1em 28px 1em 28px;
869868
color: #ccc;
870869
border-top: 1px solid #000;
871870
border-bottom: 1px solid #404040

0 commit comments

Comments
 (0)