PageRenderTime 52ms CodeModel.GetById 28ms RepoModel.GetById 0ms app.codeStats 0ms

/docs/filter-collection.html

https://bitbucket.org/madebybottle/bottlecap
HTML | 440 lines | 291 code | 149 blank | 0 comment | 0 complexity | faf8cb05a7af49dff9dfbf9a90a21b00 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>filter-collection.js</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  7. <link rel="stylesheet" media="all" href="docco.css" />
  8. </head>
  9. <body>
  10. <div id="container">
  11. <div id="background"></div>
  12. <ul id="jump_to">
  13. <li>
  14. <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
  15. <a class="small" href="javascript:void(0);">+</a>
  16. <div id="jump_wrapper">
  17. <div id="jump_page">
  18. <a class="source" href="base-collection.html">
  19. base-collection.js
  20. </a>
  21. <a class="source" href="filter-collection.html">
  22. filter-collection.js
  23. </a>
  24. <a class="source" href="live-collection.html">
  25. live-collection.js
  26. </a>
  27. <a class="source" href="base-controller.html">
  28. base-controller.js
  29. </a>
  30. <a class="source" href="data-bindings.html">
  31. data-bindings.js
  32. </a>
  33. <a class="source" href="base-model.html">
  34. base-model.js
  35. </a>
  36. <a class="source" href="base-module.html">
  37. base-module.js
  38. </a>
  39. <a class="source" href="base-router.html">
  40. base-router.js
  41. </a>
  42. <a class="source" href="base-view.html">
  43. base-view.js
  44. </a>
  45. <a class="source" href="collection-view.html">
  46. collection-view.js
  47. </a>
  48. <a class="source" href="model-view.html">
  49. model-view.js
  50. </a>
  51. </div>
  52. </li>
  53. </ul>
  54. <ul class="sections">
  55. <li id="title">
  56. <div class="annotation">
  57. <h1>filter-collection.js</h1>
  58. </div>
  59. </li>
  60. <li id="section-1">
  61. <div class="annotation">
  62. <div class="pilwrap ">
  63. <a class="pilcrow" href="#section-1">&#182;</a>
  64. </div>
  65. </div>
  66. <div class="content"><div class='highlight'><pre>module.exports = <span class="keyword">function</span>(options) {</pre></div></div>
  67. </li>
  68. <li id="section-2">
  69. <div class="annotation">
  70. <div class="pilwrap for-h2">
  71. <a class="pilcrow" href="#section-2">&#182;</a>
  72. </div>
  73. <h2>FilterCollection</h2>
  74. <hr>
  75. </div>
  76. </li>
  77. <li id="section-3">
  78. <div class="annotation">
  79. <div class="pilwrap ">
  80. <a class="pilcrow" href="#section-3">&#182;</a>
  81. </div>
  82. <p>The FilterCollection is a read-only collection that is initialized with a
  83. parent collection and a filter. Whenever the parent is changed, the
  84. FilterCollection will update. Only models in the parent collection that
  85. pass the filter function will be included in the FilterCollection.</p>
  86. <h3>Dependencies</h3>
  87. <hr>
  88. </div>
  89. </li>
  90. <li id="section-4">
  91. <div class="annotation">
  92. <div class="pilwrap ">
  93. <a class="pilcrow" href="#section-4">&#182;</a>
  94. </div>
  95. </div>
  96. <div class="content"><div class='highlight'><pre> <span class="keyword">var</span> Backbone = options.Backbone;
  97. <span class="keyword">var</span> FilterCollection = Backbone.Collection.extend({</pre></div></div>
  98. </li>
  99. <li id="section-5">
  100. <div class="annotation">
  101. <div class="pilwrap ">
  102. <a class="pilcrow" href="#section-5">&#182;</a>
  103. </div>
  104. <p>Creates and returns a new Backbone.Collection subclass, that is
  105. supposed to be <code>read-only</code>. It will keep up to date with its parent
  106. collection (when models are added, changed etc.);</p>
  107. <p>This filtered collection can be sorted independantly of its parent
  108. collection.</p>
  109. </div>
  110. <div class="content"><div class='highlight'><pre> constructor: <span class="keyword">function</span>(options) {
  111. <span class="keyword">var</span> args = Array.prototype.slice.call(arguments);
  112. args.unshift();
  113. Backbone.Collection.apply(<span class="keyword">this</span>, args);
  114. <span class="keyword">this</span>._parent = options.parent;</pre></div></div>
  115. </li>
  116. <li id="section-6">
  117. <div class="annotation">
  118. <div class="pilwrap ">
  119. <a class="pilcrow" href="#section-6">&#182;</a>
  120. </div>
  121. <p>by default, use the same comparator as our parent</p>
  122. </div>
  123. <div class="content"><div class='highlight'><pre> <span class="keyword">this</span>.comparator = <span class="keyword">this</span>._parent.comparator;</pre></div></div>
  124. </li>
  125. <li id="section-7">
  126. <div class="annotation">
  127. <div class="pilwrap ">
  128. <a class="pilcrow" href="#section-7">&#182;</a>
  129. </div>
  130. <p>add our bindings</p>
  131. </div>
  132. <div class="content"><div class='highlight'><pre> <span class="keyword">this</span>._parent.on(<span class="string">'add'</span>, <span class="keyword">this</span>._parentAdd, <span class="keyword">this</span>);
  133. <span class="keyword">this</span>._parent.on(<span class="string">'remove'</span>, <span class="keyword">this</span>._parentRemove, <span class="keyword">this</span>);
  134. <span class="keyword">this</span>._parent.on(<span class="string">'reset'</span>, <span class="keyword">this</span>._parentReset, <span class="keyword">this</span>);
  135. <span class="keyword">this</span>._parent.on(<span class="string">'change'</span>, <span class="keyword">this</span>._parentChange, <span class="keyword">this</span>);
  136. <span class="keyword">this</span>._parent.on(<span class="string">'sync'</span>, <span class="keyword">this</span>._parentSync, <span class="keyword">this</span>);</pre></div></div>
  137. </li>
  138. <li id="section-8">
  139. <div class="annotation">
  140. <div class="pilwrap ">
  141. <a class="pilcrow" href="#section-8">&#182;</a>
  142. </div>
  143. <p>we need a reference to our filter later</p>
  144. </div>
  145. <div class="content"><div class='highlight'><pre> <span class="keyword">this</span>._filter = options.filter;
  146. <span class="keyword">this</span>._limit = options.limit;
  147. <span class="keyword">this</span>._offset = options.offset;</pre></div></div>
  148. </li>
  149. <li id="section-9">
  150. <div class="annotation">
  151. <div class="pilwrap ">
  152. <a class="pilcrow" href="#section-9">&#182;</a>
  153. </div>
  154. <p>filter the parent as it is now, and reset ourselves to that state</p>
  155. </div>
  156. <div class="content"><div class='highlight'><pre> <span class="keyword">this</span>._parentReset();
  157. <span class="keyword">return</span> <span class="keyword">this</span>;
  158. },</pre></div></div>
  159. </li>
  160. <li id="section-10">
  161. <div class="annotation">
  162. <div class="pilwrap ">
  163. <a class="pilcrow" href="#section-10">&#182;</a>
  164. </div>
  165. <p>Returns another FilteredCollection based on this collection</p>
  166. </div>
  167. <div class="content"><div class='highlight'><pre> subcollection: <span class="keyword">function</span>(options) {
  168. options = options || {};
  169. options.parent = options.parent || <span class="keyword">this</span>;
  170. <span class="keyword">var</span> col = <span class="keyword">new</span> FilterCollection(options);
  171. <span class="keyword">return</span> col;
  172. },</pre></div></div>
  173. </li>
  174. <li id="section-11">
  175. <div class="annotation">
  176. <div class="pilwrap ">
  177. <a class="pilcrow" href="#section-11">&#182;</a>
  178. </div>
  179. <p>Adds the model that was added to the to the Parent, if it passes the
  180. filter function.</p>
  181. </div>
  182. <div class="content"><div class='highlight'><pre> _parentAdd: <span class="keyword">function</span>(model) {
  183. <span class="keyword">if</span> (<span class="keyword">this</span>._filter(model)) {
  184. <span class="keyword">this</span>.add(model);
  185. <span class="keyword">if</span> (<span class="keyword">this</span>.length &gt; <span class="keyword">this</span>._maxLength) {
  186. <span class="keyword">this</span>.pop();
  187. }
  188. }
  189. },</pre></div></div>
  190. </li>
  191. <li id="section-12">
  192. <div class="annotation">
  193. <div class="pilwrap ">
  194. <a class="pilcrow" href="#section-12">&#182;</a>
  195. </div>
  196. <p>Removes the model that was removed from the Parent.</p>
  197. </div>
  198. <div class="content"><div class='highlight'><pre> _parentRemove: <span class="keyword">function</span>(model) {
  199. <span class="keyword">this</span>.remove(model);
  200. },</pre></div></div>
  201. </li>
  202. <li id="section-13">
  203. <div class="annotation">
  204. <div class="pilwrap ">
  205. <a class="pilcrow" href="#section-13">&#182;</a>
  206. </div>
  207. <p>Adds the model that was changed on Parent, if the model passes our
  208. filter function. Removes the model from our collection if the model
  209. does not pass our filter function.</p>
  210. </div>
  211. <div class="content"><div class='highlight'><pre> _parentChange: <span class="keyword">function</span>(model) {
  212. <span class="keyword">if</span> (<span class="keyword">this</span>._filter(model)) {
  213. <span class="keyword">this</span>.add(model);
  214. } <span class="keyword">else</span> {
  215. <span class="keyword">this</span>.remove(model);
  216. }
  217. },</pre></div></div>
  218. </li>
  219. <li id="section-14">
  220. <div class="annotation">
  221. <div class="pilwrap ">
  222. <a class="pilcrow" href="#section-14">&#182;</a>
  223. </div>
  224. <p>Resets our models to that of the Parent&#39;s new models, filtered with
  225. our filter function.</p>
  226. </div>
  227. <div class="content"><div class='highlight'><pre> _parentReset: <span class="keyword">function</span>(collection, options) {
  228. <span class="keyword">this</span>._filterParent();
  229. },</pre></div></div>
  230. </li>
  231. <li id="section-15">
  232. <div class="annotation">
  233. <div class="pilwrap ">
  234. <a class="pilcrow" href="#section-15">&#182;</a>
  235. </div>
  236. </div>
  237. <div class="content"><div class='highlight'><pre> _parentSync: <span class="keyword">function</span>(model) {</pre></div></div>
  238. </li>
  239. <li id="section-16">
  240. <div class="annotation">
  241. <div class="pilwrap ">
  242. <a class="pilcrow" href="#section-16">&#182;</a>
  243. </div>
  244. <p>console.log(&#39;got sync&#39;);
  245. console.log(model);
  246. this._parentChange.apply(this, arguments);</p>
  247. </div>
  248. <div class="content"><div class='highlight'><pre> },</pre></div></div>
  249. </li>
  250. <li id="section-17">
  251. <div class="annotation">
  252. <div class="pilwrap ">
  253. <a class="pilcrow" href="#section-17">&#182;</a>
  254. </div>
  255. <p>Filters the parent models based on our collection filter, and other
  256. parameters (like limit &amp; offset)</p>
  257. </div>
  258. <div class="content"><div class='highlight'><pre> _filterParent: <span class="keyword">function</span>() {
  259. <span class="keyword">var</span> filtered = <span class="keyword">this</span>._parent.filter(<span class="keyword">this</span>._filter);
  260. <span class="keyword">if</span> (<span class="keyword">this</span>._offset) {
  261. filtered = _.rest(filtered, <span class="keyword">this</span>._offset);
  262. }
  263. <span class="keyword">if</span> (<span class="keyword">this</span>._limit) {
  264. filtered = _.first(filtered, <span class="keyword">this</span>._limit);
  265. }
  266. <span class="keyword">this</span>.reset(filtered);
  267. }
  268. });</pre></div></div>
  269. </li>
  270. <li id="section-18">
  271. <div class="annotation">
  272. <div class="pilwrap for-h3">
  273. <a class="pilcrow" href="#section-18">&#182;</a>
  274. </div>
  275. <h3>Exports</h3>
  276. <hr>
  277. </div>
  278. </li>
  279. <li id="section-19">
  280. <div class="annotation">
  281. <div class="pilwrap ">
  282. <a class="pilcrow" href="#section-19">&#182;</a>
  283. </div>
  284. </div>
  285. <div class="content"><div class='highlight'><pre> <span class="keyword">return</span> FilterCollection;
  286. };</pre></div></div>
  287. </li>
  288. </ul>
  289. </div>
  290. </body>
  291. </html>