× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Filtering a Ember.js collection

Christoph Wagner
Jan 30, 2015
<p>If you have an Ember.js collection, and you want to display only certain elements from it, rather than all the elements in the collection, you can use a computed property to filter the collection. Consider this example:</p> <pre><code><span style="color:rgb(43, 145, 175)">App</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(43, 145, 175)">Post</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">=</span><span style="color:rgb(0, 0, 0)"> DS</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(43, 145, 175)">Model</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 0)">extend</span><span style="color:rgb(0, 0, 0)">({</span><span style="color:rgb(0, 0, 0)"> text</span><span style="color:rgb(0, 0, 0)">:</span><span style="color:rgb(0, 0, 0)"> DS</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 0)">attr</span><span style="color:rgb(0, 0, 0)">(</span><span style="color:rgb(128, 0, 0)">'string'</span><span style="color:rgb(0, 0, 0)">),</span><span style="color:rgb(0, 0, 0)"> active</span><span style="color:rgb(0, 0, 0)">:</span><span style="color:rgb(0, 0, 0)"> DS</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 0)">attr</span><span style="color:rgb(0, 0, 0)">(</span><span style="color:rgb(128, 0, 0)">'boolean'</span><span style="color:rgb(0, 0, 0)">)</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">});</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(43, 145, 175)">App</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(43, 145, 175)">IndexRoute</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">=</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(43, 145, 175)">Ember</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(43, 145, 175)">Route</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 0)">extend</span><span style="color:rgb(0, 0, 0)">({</span><span style="color:rgb(0, 0, 0)"> model</span><span style="color:rgb(0, 0, 0)">:</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">function</span><span style="color:rgb(0, 0, 0)">()</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">{</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">return</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(43, 145, 175)">App</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(43, 145, 175)">Post</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 0)">find</span><span style="color:rgb(0, 0, 0)">();</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">}</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">});</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(43, 145, 175)">App</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(43, 145, 175)">IndexController</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">=</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(43, 145, 175)">Ember</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(43, 145, 175)">ArrayController</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 0)">extend</span><span style="color:rgb(0, 0, 0)">({</span><span style="color:rgb(0, 0, 0)"> hideInactive</span><span style="color:rgb(0, 0, 0)">:</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">false</span><span style="color:rgb(0, 0, 0)">,</span><span style="color:rgb(0, 0, 0)"> filteredContent</span><span style="color:rgb(0, 0, 0)">:</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">function</span><span style="color:rgb(0, 0, 0)">()</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">{</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">var</span><span style="color:rgb(0, 0, 0)"> content </span><span style="color:rgb(0, 0, 0)">=</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">this</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 139)">get</span><span style="color:rgb(0, 0, 0)">(</span><span style="color:rgb(128, 0, 0)">'content'</span><span style="color:rgb(0, 0, 0)">);</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">if</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">(!</span><span style="color:rgb(0, 0, 0)">content </span><span style="color:rgb(0, 0, 0)">||</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">!</span><span style="color:rgb(0, 0, 139)">this</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 139)">get</span><span style="color:rgb(0, 0, 0)">(</span><span style="color:rgb(128, 0, 0)">'hideInactive'</span><span style="color:rgb(0, 0, 0)">))</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">return</span><span style="color:rgb(0, 0, 0)"> content</span><span style="color:rgb(0, 0, 0)">;</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">return</span><span style="color:rgb(0, 0, 0)"> content</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 0)">filter</span><span style="color:rgb(0, 0, 0)">(</span><span style="color:rgb(0, 0, 139)">function</span><span style="color:rgb(0, 0, 0)">(</span><span style="color:rgb(0, 0, 0)">item</span><span style="color:rgb(0, 0, 0)">)</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">{</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 139)">return</span><span style="color:rgb(0, 0, 0)"> item</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(0, 0, 139)">get</span><span style="color:rgb(0, 0, 0)">(</span><span style="color:rgb(128, 0, 0)">'active'</span><span style="color:rgb(0, 0, 0)">);</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">});</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">}.</span><span style="color:rgb(0, 0, 139)">property</span><span style="color:rgb(0, 0, 0)">(</span><span style="color:rgb(128, 0, 0)">'content.isLoaded'</span><span style="color:rgb(0, 0, 0)">,</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(128, 0, 0)">'hideInactive'</span><span style="color:rgb(0, 0, 0)">)</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">});</span></code></pre> <p>Your template should look something like this:</p> <pre><code><span style="color:rgb(128, 0, 0)">&lt;script</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(255, 0, 0)">type</span><span style="color:rgb(0, 0, 0)">=</span><span style="color:rgb(0, 0, 255)">"text/x-handlebars"</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(255, 0, 0)">data-template-name</span><span style="color:rgb(0, 0, 0)">=</span><span style="color:rgb(0, 0, 255)">"index"</span><span style="color:rgb(128, 0, 0)">&gt;</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">&lt;</span><span style="color:rgb(0, 0, 0)">p</span><span style="color:rgb(0, 0, 0)">&gt;{{</span><span style="color:rgb(0, 0, 0)">view </span><span style="color:rgb(43, 145, 175)">Ember</span><span style="color:rgb(0, 0, 0)">.</span><span style="color:rgb(43, 145, 175)">Checkbox</span><span style="color:rgb(0, 0, 0)"> checkedBinding</span><span style="color:rgb(0, 0, 0)">=</span><span style="color:rgb(128, 0, 0)">"hideInactive"</span><span style="color:rgb(0, 0, 0)">}}</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(43, 145, 175)">Hide</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(43, 145, 175)">Inactive</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(43, 145, 175)">Posts</span><span style="color:rgb(0, 0, 0)">&lt;/</span><span style="color:rgb(0, 0, 0)">p</span><span style="color:rgb(0, 0, 0)">&gt;</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">&lt;</span><span style="color:rgb(0, 0, 0)">br</span><span style="color:rgb(0, 0, 0)">/&gt;</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">{{#</span><span style="color:rgb(0, 0, 0)">each filteredContent</span><span style="color:rgb(0, 0, 0)">}}</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">&lt;</span><span style="color:rgb(0, 0, 0)">p</span><span style="color:rgb(0, 0, 0)">&gt;{{</span><span style="color:rgb(0, 0, 0)">text</span><span style="color:rgb(0, 0, 0)">}}&lt;/</span><span style="color:rgb(0, 0, 0)">p</span><span style="color:rgb(0, 0, 0)">&gt;</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 0)">{{/</span><span style="color:rgb(0, 0, 0)">each</span><span style="color:rgb(0, 0, 0)">}}</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(128, 0, 0)">&lt;/script&gt;</span></code></pre> <p>Now, whenever <code>isInactive</code> is set to <code>true</code>, only posts which have the <code>active</code> attribute set to a truthy value will be shown.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus