01 November 2012

[Tutorial] The Backbone Subset Library

In this tutorial, we will show you how to create a list and easily add filters to it by using our library: Backbone-Subset. It was made by Jean Boussier with the Planbox team. Some useful links:
Planbox tutorial for backbone subset library

Application Structure

The application is composed of 3 backbone views:
  • Dashboard: To let the user enter new filters
  • Criterias: The list of filters applied to the list
  • List: the list of books itself
We also have a backbone collection of books which is wrapped into Backbone subset. When adding filters to Backbone subset, the collection is automatically updated.

Making application

Creating and wrapping the collection

We start by creating the collection Backbone-subset takes a backbone collection as a source in its constructor. Now we have a library containing our books. The library will provide us two things:
  • Our filtered collection: library.collection
  • Our list of filters: library.filters
library.filters is an instance of Subset.Filters which itself inherits from a Backbone Collection. It is now going to be possible to listen to modifications on library.filter and on library.collection, and we will update our views when they are modified.


We will start by making the dashboard. The html code is very simple, we have three attributes on which we want to filter our collection. Here is the code for the dashboard view: It is initialized with our library The view listens for the enter keypress event on a field. When that occurs, the attribute’s name and value are passed to a function which adds filters. It then cleans the fields of the dashboard.

As you probably guessed it, the addFilter function will insert new filters in the library.

You can see that in addition to passing it the attribute and the values, we are providing it an operator. That’s because filters can work with both array or scalar attributes. Since title and author are both scalar values, we will make sure that the title or author of the book is in the list of titles or values that we entered. Categories being an array, we will just ask that one of its values is in the list of the values that we entered. There are other operators that you can use. Check it out on the github page: https://github.com/Planbox/backbone-subset

Criterias and List

Now that we have our collection and that we can add filters to it, it’s time to display the result to the user. Criterias and List views are very simple Backbone views. They each display items in a container. Here is the container for lists: And the template for the items, with the underscore template engine. The important thing to note here is that the collection we are listening to is a subset of the of our books (that we created earlier). We don’t care how it is modified, the only importance is to keep the most up to date version In a more elaborate application, it would also have been better to create a view for each items. Since they still reference to the same models, it would not have been necessary to recreate the entire list on each modification. The list is initialized by passing it the library’s collection. Similarly, we have a container, and templates for the criterias: And the only difference in the list is that we can remove items from it. For that reason we need to keep track of the cid of each filter, as seen in the template. However, unlike the List, we initialize the Criterias by passing it the library’s filters. Now we have a functional application which enables us to filter our list as we want. We could also add another view to insert new books into our library, or we could make the books editable. The source code is available here: https://github.com/Planbox/Bookstore-example   Was this tutorial useful to you? We would love to hear about how you apply the Backbone Subset Library. Please share a link to your work in the comments below!          
comments powered by Disqus