/docs/filter-collection.html
HTML | 440 lines | 291 code | 149 blank | 0 comment | 0 complexity | faf8cb05a7af49dff9dfbf9a90a21b00 MD5 | raw file
- <!DOCTYPE html>
- <html>
- <head>
- <title>filter-collection.js</title>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
- <link rel="stylesheet" media="all" href="docco.css" />
- </head>
- <body>
- <div id="container">
- <div id="background"></div>
-
- <ul id="jump_to">
- <li>
- <a class="large" href="javascript:void(0);">Jump To …</a>
- <a class="small" href="javascript:void(0);">+</a>
- <div id="jump_wrapper">
- <div id="jump_page">
-
-
- <a class="source" href="base-collection.html">
- base-collection.js
- </a>
-
-
- <a class="source" href="filter-collection.html">
- filter-collection.js
- </a>
-
-
- <a class="source" href="live-collection.html">
- live-collection.js
- </a>
-
-
- <a class="source" href="base-controller.html">
- base-controller.js
- </a>
-
-
- <a class="source" href="data-bindings.html">
- data-bindings.js
- </a>
-
-
- <a class="source" href="base-model.html">
- base-model.js
- </a>
-
-
- <a class="source" href="base-module.html">
- base-module.js
- </a>
-
-
- <a class="source" href="base-router.html">
- base-router.js
- </a>
-
-
- <a class="source" href="base-view.html">
- base-view.js
- </a>
-
-
- <a class="source" href="collection-view.html">
- collection-view.js
- </a>
-
-
- <a class="source" href="model-view.html">
- model-view.js
- </a>
-
- </div>
- </li>
- </ul>
-
- <ul class="sections">
-
- <li id="title">
- <div class="annotation">
- <h1>filter-collection.js</h1>
- </div>
- </li>
-
-
-
- <li id="section-1">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-1">¶</a>
- </div>
-
- </div>
-
- <div class="content"><div class='highlight'><pre>module.exports = <span class="keyword">function</span>(options) {</pre></div></div>
-
- </li>
-
-
- <li id="section-2">
- <div class="annotation">
-
- <div class="pilwrap for-h2">
- <a class="pilcrow" href="#section-2">¶</a>
- </div>
- <h2>FilterCollection</h2>
- <hr>
- </div>
-
- </li>
-
-
- <li id="section-3">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-3">¶</a>
- </div>
- <p>The FilterCollection is a read-only collection that is initialized with a
- parent collection and a filter. Whenever the parent is changed, the
- FilterCollection will update. Only models in the parent collection that
- pass the filter function will be included in the FilterCollection.</p>
- <h3>Dependencies</h3>
- <hr>
- </div>
-
- </li>
-
-
- <li id="section-4">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-4">¶</a>
- </div>
-
- </div>
-
- <div class="content"><div class='highlight'><pre> <span class="keyword">var</span> Backbone = options.Backbone;
- <span class="keyword">var</span> FilterCollection = Backbone.Collection.extend({</pre></div></div>
-
- </li>
-
-
- <li id="section-5">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-5">¶</a>
- </div>
- <p>Creates and returns a new Backbone.Collection subclass, that is
- supposed to be <code>read-only</code>. It will keep up to date with its parent
- collection (when models are added, changed etc.);</p>
- <p>This filtered collection can be sorted independantly of its parent
- collection.</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> constructor: <span class="keyword">function</span>(options) {
- <span class="keyword">var</span> args = Array.prototype.slice.call(arguments);
- args.unshift();
- Backbone.Collection.apply(<span class="keyword">this</span>, args);
- <span class="keyword">this</span>._parent = options.parent;</pre></div></div>
-
- </li>
-
-
- <li id="section-6">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-6">¶</a>
- </div>
- <p>by default, use the same comparator as our parent</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> <span class="keyword">this</span>.comparator = <span class="keyword">this</span>._parent.comparator;</pre></div></div>
-
- </li>
-
-
- <li id="section-7">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-7">¶</a>
- </div>
- <p>add our bindings</p>
- </div>
-
- <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>);
- <span class="keyword">this</span>._parent.on(<span class="string">'remove'</span>, <span class="keyword">this</span>._parentRemove, <span class="keyword">this</span>);
- <span class="keyword">this</span>._parent.on(<span class="string">'reset'</span>, <span class="keyword">this</span>._parentReset, <span class="keyword">this</span>);
- <span class="keyword">this</span>._parent.on(<span class="string">'change'</span>, <span class="keyword">this</span>._parentChange, <span class="keyword">this</span>);
- <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>
-
- </li>
-
-
- <li id="section-8">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-8">¶</a>
- </div>
- <p>we need a reference to our filter later</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> <span class="keyword">this</span>._filter = options.filter;
- <span class="keyword">this</span>._limit = options.limit;
- <span class="keyword">this</span>._offset = options.offset;</pre></div></div>
-
- </li>
-
-
- <li id="section-9">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-9">¶</a>
- </div>
- <p>filter the parent as it is now, and reset ourselves to that state</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> <span class="keyword">this</span>._parentReset();
- <span class="keyword">return</span> <span class="keyword">this</span>;
- },</pre></div></div>
-
- </li>
-
-
- <li id="section-10">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-10">¶</a>
- </div>
- <p>Returns another FilteredCollection based on this collection</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> subcollection: <span class="keyword">function</span>(options) {
- options = options || {};
- options.parent = options.parent || <span class="keyword">this</span>;
- <span class="keyword">var</span> col = <span class="keyword">new</span> FilterCollection(options);
- <span class="keyword">return</span> col;
- },</pre></div></div>
-
- </li>
-
-
- <li id="section-11">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-11">¶</a>
- </div>
- <p>Adds the model that was added to the to the Parent, if it passes the
- filter function.</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> _parentAdd: <span class="keyword">function</span>(model) {
- <span class="keyword">if</span> (<span class="keyword">this</span>._filter(model)) {
- <span class="keyword">this</span>.add(model);
- <span class="keyword">if</span> (<span class="keyword">this</span>.length > <span class="keyword">this</span>._maxLength) {
- <span class="keyword">this</span>.pop();
- }
- }
- },</pre></div></div>
-
- </li>
-
-
- <li id="section-12">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-12">¶</a>
- </div>
- <p>Removes the model that was removed from the Parent.</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> _parentRemove: <span class="keyword">function</span>(model) {
- <span class="keyword">this</span>.remove(model);
- },</pre></div></div>
-
- </li>
-
-
- <li id="section-13">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-13">¶</a>
- </div>
- <p>Adds the model that was changed on Parent, if the model passes our
- filter function. Removes the model from our collection if the model
- does not pass our filter function.</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> _parentChange: <span class="keyword">function</span>(model) {
- <span class="keyword">if</span> (<span class="keyword">this</span>._filter(model)) {
- <span class="keyword">this</span>.add(model);
- } <span class="keyword">else</span> {
- <span class="keyword">this</span>.remove(model);
- }
- },</pre></div></div>
-
- </li>
-
-
- <li id="section-14">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-14">¶</a>
- </div>
- <p>Resets our models to that of the Parent's new models, filtered with
- our filter function.</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> _parentReset: <span class="keyword">function</span>(collection, options) {
- <span class="keyword">this</span>._filterParent();
- },</pre></div></div>
-
- </li>
-
-
- <li id="section-15">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-15">¶</a>
- </div>
-
- </div>
-
- <div class="content"><div class='highlight'><pre> _parentSync: <span class="keyword">function</span>(model) {</pre></div></div>
-
- </li>
-
-
- <li id="section-16">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-16">¶</a>
- </div>
- <p>console.log('got sync');
- console.log(model);
- this._parentChange.apply(this, arguments);</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> },</pre></div></div>
-
- </li>
-
-
- <li id="section-17">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-17">¶</a>
- </div>
- <p>Filters the parent models based on our collection filter, and other
- parameters (like limit & offset)</p>
- </div>
-
- <div class="content"><div class='highlight'><pre> _filterParent: <span class="keyword">function</span>() {
- <span class="keyword">var</span> filtered = <span class="keyword">this</span>._parent.filter(<span class="keyword">this</span>._filter);
- <span class="keyword">if</span> (<span class="keyword">this</span>._offset) {
- filtered = _.rest(filtered, <span class="keyword">this</span>._offset);
- }
- <span class="keyword">if</span> (<span class="keyword">this</span>._limit) {
- filtered = _.first(filtered, <span class="keyword">this</span>._limit);
- }
- <span class="keyword">this</span>.reset(filtered);
- }
- });</pre></div></div>
-
- </li>
-
-
- <li id="section-18">
- <div class="annotation">
-
- <div class="pilwrap for-h3">
- <a class="pilcrow" href="#section-18">¶</a>
- </div>
- <h3>Exports</h3>
- <hr>
- </div>
-
- </li>
-
-
- <li id="section-19">
- <div class="annotation">
-
- <div class="pilwrap ">
- <a class="pilcrow" href="#section-19">¶</a>
- </div>
-
- </div>
-
- <div class="content"><div class='highlight'><pre> <span class="keyword">return</span> FilterCollection;
- };</pre></div></div>
-
- </li>
-
- </ul>
- </div>
- </body>
- </html>