|
| 1 | +<!DOCTYPE html> |
| 2 | +<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> |
| 3 | +<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]--> |
| 4 | +<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]--> |
| 5 | +<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> |
| 6 | +<head> |
| 7 | + <title>Polymorphic and recursive data - Type-R</title> |
| 8 | + <meta name="description" content="Universal state management for JS" /> |
| 9 | + <meta name="author" content="Vlad Balin"> |
| 10 | + <meta charset="UTF-8"> |
| 11 | + <link rel="icon" href="../themes/daux/img/favicon-navy.png" type="image/x-icon"> |
| 12 | + <!-- Mobile --> |
| 13 | + <meta name="apple-mobile-web-app-capable" content="yes" /> |
| 14 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 15 | + |
| 16 | + <!-- Font --> |
| 17 | + <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'> |
| 18 | + <!-- CSS --> |
| 19 | + <link href='../themes/daux/css/theme-navy.min.css' rel='stylesheet' type='text/css'> |
| 20 | + <!-- Tipue Search --> |
| 21 | + <link href="../tipuesearch/tipuesearch.css" rel="stylesheet"> |
| 22 | + |
| 23 | + <!--[if lt IE 9]> |
| 24 | + <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
| 25 | + <![endif]--> |
| 26 | +</head> |
| 27 | +<body class=""> |
| 28 | + |
| 29 | +<header class="Navbar hidden-print"> |
| 30 | + <a class="Navbar__brand" href="../index.html">Type-R</a> |
| 31 | + |
| 32 | + <div class="Search"> |
| 33 | + <svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg> |
| 34 | + <input type="search" id="tipue_search_input" class="Search__field" placeholder="Search..." autocomplete="on" results=25 autosave=text_search> |
| 35 | + </div> |
| 36 | +</header> |
| 37 | +<div class="Columns content"> |
| 38 | + <aside class="Columns__left Collapsible"> |
| 39 | + <div class="Collapsible__container"> |
| 40 | + <button type="button" class="Button Collapsible__trigger"> |
| 41 | + <span class="Collapsible__trigger--bar"></span> |
| 42 | + <span class="Collapsible__trigger--bar"></span> |
| 43 | + <span class="Collapsible__trigger--bar"></span> |
| 44 | + </button> |
| 45 | + </div> |
| 46 | + |
| 47 | + <div class="Collapsible__content"> |
| 48 | + <!-- Navigation --> |
| 49 | + <ul class='Nav'><li class='Nav__item '><a href="../Getting_Started.html">Getting Started</a></li><li class='Nav__item has-children'><a href="../Record/Definition.html" class="folder"><i class="Nav__arrow"> </i>Record</a><ul class='Nav'><li class='Nav__item '><a href="../Record/Definition.html">Definition</a></li><li class='Nav__item '><a href="../Record/Updates_and_transactions.html">Updates and transactions</a></li><li class='Nav__item '><a href="../Record/Listening_to_events.html">Listening to events</a></li></ul></li><li class='Nav__item has-children'><a href="../Collection/Definition.html" class="folder"><i class="Nav__arrow"> </i>Collection</a><ul class='Nav'><li class='Nav__item '><a href="../Collection/Definition.html">Definition</a></li><li class='Nav__item '><a href="../Collection/Updates_and_transactions.html">Updates and transactions</a></li><li class='Nav__item '><a href="../Collection/Listening_to_events.html">Listening to events</a></li><li class='Nav__item '><a href="../Collection/Iteration_methods.html">Iteration methods</a></li><li class='Nav__item '><a href="../Collection/Sorted_collections.html">Sorted collections</a></li><li class='Nav__item '><a href="../Collection/Proxied_array_methods.html">Proxied array methods</a></li></ul></li><li class='Nav__item Nav__item--open has-children'><a href="../API_by_feature/Aggregation_tree.html" class="folder"><i class="Nav__arrow"> </i>API by feature</a><ul class='Nav'><li class='Nav__item '><a href="../API_by_feature/Aggregation_tree.html">Aggregation tree</a></li><li class='Nav__item '><a href="../API_by_feature/Serialization.html">Serialization</a></li><li class='Nav__item '><a href="../API_by_feature/Validation.html">Validation</a></li><li class='Nav__item '><a href="../API_by_feature/Shared_objects.html">Shared objects</a></li><li class='Nav__item '><a href="../API_by_feature/id-references_and_Stores.html">id-references and Stores</a></li><li class='Nav__item Nav__item--active'><a href="../API_by_feature/Polymorphic_and_recursive_data.html">Polymorphic and recursive data</a></li></ul></li><li class='Nav__item '><a href="../Events.html">Events</a></li><li class='Nav__item '><a href="../Mixins.html">Mixins</a></li></ul> |
| 50 | + |
| 51 | + <div class="Links"> |
| 52 | + <hr/> |
| 53 | + <a href="https://github.com/Volicon/Type-R/issues" target="_blank">Help/Support/Bugs</a> |
| 54 | + <br /> |
| 55 | + <a href="http://volicon.com" target="_blank">Made by Volicon (a Verizon company)</a> |
| 56 | + <br /> |
| 57 | + |
| 58 | + <div class="CodeToggler"> |
| 59 | + <hr/> |
| 60 | + <a class="CodeToggler__button CodeToggler__button--main" href="#">Show Code Blocks Inline</a><br> |
| 61 | + </div> |
| 62 | + |
| 63 | + <hr/> |
| 64 | + <div class="Twitter"> |
| 65 | + <iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:162px; height:20px;" src="https://platform.twitter.com/widgets/follow_button.html?screen_name=gaperton&show_count=false"></iframe> |
| 66 | + <br /> |
| 67 | + <br /> |
| 68 | + </div> |
| 69 | + </div> |
| 70 | + </div> |
| 71 | + </aside> |
| 72 | + <div class="Columns__right "> |
| 73 | + <div class="Columns__right__content"> |
| 74 | + <div class="doc_content"> |
| 75 | + <article class="Page"> |
| 76 | + |
| 77 | + <div class="Page__header"> |
| 78 | + <h1>Polymorphic and recursive data</h1> |
| 79 | + <span style="float: right; font-size: 10px; color: gray;"> |
| 80 | + <a href="https://github.com/Volicon/Type-R/blob/master/docsource/06_API_by_feature/07_Polymorphic_and_recursive_data.md" target="_blank">Edit on GitHub</a> |
| 81 | + </span> |
| 82 | + </div> |
| 83 | + |
| 84 | + |
| 85 | + <div class="s-content"> |
| 86 | + <h1 id="page_Polymorphic+data+structures">Polymorphic data structures</h1> |
| 87 | +<p>Sometimes it's required to deal with the collection of records of different types. |
| 88 | +In the simplest case, <code>Record.Collection</code> is polymirphic in a sense that it may hold any record |
| 89 | +inside, as well as the record's attribute of the <code>Record</code> type.</p> |
| 90 | +<p>The trick, however, is to restore polymorphic data from JSON as its type is unknown. |
| 91 | +Type-R solves it with <em>abstract records</em>.</p> |
| 92 | +<h2 id="page_Defining+an+abstract+record">Defining an abstract record</h2> |
| 93 | +<p>Record base class with the <code>create()</code> factory function attached to its definition is an <em>abstract record</em>.</p> |
| 94 | +<h3 id="page_create%28+attrs%2C+options+%29"><code>static</code> create( attrs, options )</h3> |
| 95 | +<p>The factory function used internally by Type-R to create the instance of the record. |
| 96 | +Must be defined in the base class for the polymorphic record.</p> |
| 97 | +<pre><code class="language-javascript">@define class Widget extends Record { |
| 98 | + static attributes = { |
| 99 | + type : String |
| 100 | + } |
| 101 | + |
| 102 | + static create( attrs, options ){ |
| 103 | + switch( attrs.type ){ |
| 104 | + case "typeA" : return new TypeA( attrs, options ); |
| 105 | + case "typeB" : return new TypeB( attrs, options ); |
| 106 | + } |
| 107 | + } |
| 108 | +} |
| 109 | + |
| 110 | +@define class TypeA extends Widget { |
| 111 | + static attributes = { |
| 112 | + type : "typeA", |
| 113 | + ... |
| 114 | + } |
| 115 | +} |
| 116 | + |
| 117 | +@define class TypeB extends Widget { |
| 118 | + static attributes = { |
| 119 | + type : "typeB", |
| 120 | + ... |
| 121 | + } |
| 122 | +} |
| 123 | +</code></pre> |
| 124 | +<h2 id="page_Polymorphic+attributes+and+collections">Polymorphic attributes and collections</h2> |
| 125 | +<p>Abstract record type can be used to define serializable polymorphic attributes and collections.</p> |
| 126 | +<h3 id="page_attr+%3A+PolymorphicRecord"><code>attrDef</code> attr : PolymorphicRecord</h3> |
| 127 | +<p>Attribute of polymorphic record type is serializable.</p> |
| 128 | +<h3 id="page_PolymorphicRecord.Collection">PolymorphicRecord.Collection</h3> |
| 129 | +<p>The default Collection for the polymorphic record type is serializable.</p> |
| 130 | +<h1 id="page_Recursive+data+structures">Recursive data structures</h1> |
| 131 | +<p>The record is <em>recursive</em> if it's uses the type of itself in its attribute definition.</p> |
| 132 | +<h3 id="page_RecordOrCollection.define%28%7B+attributes+%3A+%7B+name+%3A+++%7D+%7D%29">RecordOrCollection.define({ attributes : { name : <code>attrDef</code> } })</h3> |
| 133 | +<p>Used in conjunction with <code>@predefine</code> decorator to make recursive definitions |
| 134 | +referencing the same type.</p> |
| 135 | +<p>Replaces <code>static attributes</code> declaration.</p> |
| 136 | +<pre><code class="language-javascript">@predefine class Comment extends Record{} |
| 137 | + |
| 138 | +Comment.define({ |
| 139 | + attributes : { |
| 140 | + text : String, |
| 141 | + replies : Comment.Collection |
| 142 | + } |
| 143 | +}); |
| 144 | +</code></pre> |
| 145 | +<h3 id="page_Forward+collection+declaration">Forward collection declaration</h3> |
| 146 | +<p>As an alternative to <code>@predefine</code> decorator, you may make forward declaration for the collection.</p> |
| 147 | +<pre><code class="language-javascript">// Declare the collection class. |
| 148 | +@define class Comments extends Record.Collection {} |
| 149 | + |
| 150 | +@define class Comment extends Record({ |
| 151 | + static Collection = Comments; // Make it the default Comment collection. |
| 152 | + |
| 153 | + attributes : { |
| 154 | + text : String, |
| 155 | + replies : Comments |
| 156 | + } |
| 157 | +}); |
| 158 | +</code></pre> |
| 159 | + </div> |
| 160 | + |
| 161 | + <nav> |
| 162 | + <ul class="Pager"> |
| 163 | + <li class=Pager--prev><a href="../API_by_feature/id-references_and_Stores.html">Previous</a></li> <li class=Pager--next><a href="../Events.html">Next</a></li> </ul> |
| 164 | + </nav> |
| 165 | + </article> |
| 166 | + |
| 167 | + </div> |
| 168 | + </div> |
| 169 | + </div> |
| 170 | +</div> |
| 171 | + |
| 172 | + |
| 173 | + <!-- jQuery --> |
| 174 | + <script src="../themes/daux/js/jquery-1.11.3.min.js"></script> |
| 175 | + |
| 176 | + <!-- hightlight.js --> |
| 177 | + <script src="../themes/daux/js/highlight.pack.js"></script> |
| 178 | + <script>hljs.initHighlightingOnLoad();</script> |
| 179 | + |
| 180 | + <!-- JS --> |
| 181 | + |
| 182 | + <script src="../themes/daux/js/daux.js"></script> |
| 183 | + |
| 184 | + <!-- Tipue Search --> |
| 185 | + <script type="text/javascript" src="../tipuesearch/tipuesearch.js"></script> |
| 186 | + |
| 187 | + <script> |
| 188 | + window.onunload = function(){}; // force $(document).ready to be called on back/forward navigation in firefox |
| 189 | + $(function() { |
| 190 | + tipuesearch({ |
| 191 | + 'base_url': '../' |
| 192 | + }); |
| 193 | + }); |
| 194 | + </script> |
| 195 | + |
| 196 | +</body> |
| 197 | +</html> |
0 commit comments