How to fetch an item with a particular ID in backbone?

Question

I am trying to fetch a particular item from a collection using backbone. I am working from the documentation, and using Backbone.js fetch with parameters but still feel like I am guessing at the syntax.

Here is my best guess:

 var accounts, myJob;
     accounts = new JobCollection();
     myJob = accounts.fetch({
           data: $.param({
           id: '7a107f87-be69-5efa-107c-c045e75940cf'
        })
     });
 return console.log(myJob); 

How do I fetch the job with id = 7a107f87-be69-5efa-107c-c045e75940cf?

Here is the coffeescript that is defining the collection:

class JobCollection extends Backbone.Collection
    localStorage: new Backbone.LocalStorage("cl-job")
    url:'/jobs'

Answer 1

Why are you using a collection when you want to fetch a single model? A collection is a list of models, models are the ones that have IDs.

It is pretty easy to do what you're asking though:

var job = new JobModel({id: '7a107f87-be69-5efa-107c-c045e75940cf'});
job.fetch({success: doSomethingWithFetchedModel, error: handleError});

If you want to do this through a collection you can do:

var jobs = new JobCollection():
jobs.fetch({success: function(collection, resp, opts){
    console.log(collection.get('7a107f87-be69-5efa-107c-c045e75940cf''));
});

The difference here is that when you fetch a collection it'll get ALL models of that type, so then you need to find the model in that collection, whereas with a single model, you just get back the model you're looking for.

Answer 2

In Backbone, the fetch is used to retrieve data from the server via an Ajax call. So, you would use the fetch to return a list of jobs from your server. To find a job in the Collection of jobs with a particular id, you would then use the where or the findWhere functions in Collection.

Below is a Collection fetch example:

var JobModel = Backbone.Model.extend({});

var Jobs = Backbone.Collection.extend({
  model: JobModel,
  url: 'some/url/path/to/jobs.json',                        
  parse: function (response) {
    // parse jobs
  }
});

var jobs = new Jobs();
jobs.fetch(); // returns list of jobs

If your Job model has an attribute of "id" then below could be used to select a specific job from the above Jobs collection:

var job = jobs.findWhere({ id: '7a107f87-be69-5efa-107c-c045e75940cf' });

Answer 3

Borrowing from both Jimmy and tkone.

If you want to fetch a single model, without using the collection, the Model Class needs a urlRoot property defined, so that the sync call knows what url to use in the AJAX call. Alternatively you could set the collection of the model and rely on the url property of the collection when doing the fetch.

Option A (add urlRoot property to model):

class JobModel extends Backbone.Model
urlRoot:'/jobs'

var myJob = new JobModel({id: '7a107f87-be69-5efa-107c-c045e75940cf'});
job.fetch({
    success: function () {
      console.log(myJob); 
    }
 });

Option B (use url property from a JobCollection object):

 var accounts, myJob;
 accounts = new JobCollection();
 myJob = new JobModel({id: '7a107f87-be69-5efa-107c-c045e75940cf'});
 myJob.collection = accounts;
 myJob.fetch({
    success: function () {
      console.log(myJob); 
    }
 });

Answer 4

As soon as I saw this question it reminded me so much of Jérôme Gravel-Niquets Todo list application, because it uses local storage and is storing a list of data, it seemed like a great way to demonstrate how to accomplish this job list. I adapted the todo list to be a job list and tried to cover the job list requirements as well.

Just to clear up some points: fetch is for loading a collection and as Jimmy said, findWhere is how to find one item in a collection (they work like a simple database) and you wouldn't pass a url as an attribute when using local storage.

Here's what I came up with, I tried to make it as concise as possible:

(Couldn't get the js dependencies to work in jsFiddle)

jobs.js:

// modified Jérôme Gravel-Niquets Todo list Application to create a Job list
// as it demonstartes the same usage and principles
// http://backbonejs.org/examples/todos/index.html
$(function() {
    var Job = Backbone.Model.extend({
        // Default attributes for the job item.
        defaults: function() {
            return {
                title: "empty job ID...",
                order: Jobs.nextOrder(),
                done: false
            };
        },
        // Toggle the `done` state of this job item.
        toggle: function() {
            this.save({done: !this.get("done")});
        }

    });

    // Job Collection
    // ---------------

    // The collection of jobs is backed by *localStorage* instead of a remote
    // server.
    var JobList = Backbone.Collection.extend({
        // Reference to this collection's model.
        model: Job,
        // Save all of the job items under the `"jobs-backbone"` namespace.
        localStorage: new Backbone.LocalStorage("jobs-backbone"),
        // Filter down the list of all job items that are finished.
        done: function() {
            return this.where({done: true});
        },
        // Filter down the list to only job items that are still not finished.
        remaining: function() {
            return this.where({done: false});
        },
        // We keep the Jobs in sequential order, despite being saved by unordered
        // GUID in the database. This generates the next order number for new items.
        nextOrder: function() {
            if (!this.length)
                return 1;
            return this.last().get('order') + 1;
        },
        // Jobs are sorted by their original insertion order.
        comparator: 'order'

    });

    // Create our global collection of **Jobs**.
    var Jobs = new JobList;

    // Job Item View
    // --------------

    // The DOM element for a job item...
    var JobView = Backbone.View.extend({
        //... is a list tag.
        tagName: "li",
        // Cache the template function for a single item.
        template: _.template($('#item-template').html()),
        // The DOM events specific to an item.
        events: {
            "click .toggle": "toggleDone",
            "dblclick .view": "edit",
            "click a.destroy": "clear",
            "keypress .edit": "updateOnEnter",
            "blur .edit": "close"
        },
        // The JobView listens for changes to its model, re-rendering. Since there's
        // a one-to-one correspondence between a **Job** and a **JobView** in this
        // app, we set a direct reference on the model for convenience.
        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
        },
        // Re-render the titles of the job item.
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            this.$el.toggleClass('done', this.model.get('done'));
            this.input = this.$('.edit');
            return this;
        },
        // Toggle the `"done"` state of the model.
        toggleDone: function() {
            this.model.toggle();
        },
        // Switch this view into `"editing"` mode, displaying the input field.
        edit: function() {
            this.$el.addClass("editing");
            this.input.focus();
        },
        // Close the `"editing"` mode, saving changes to the job.
        close: function() {
            var value = this.input.val();
            if (!value) {
                this.clear();
            } else {
                this.model.save({title: value});
                this.$el.removeClass("editing");
            }
        },
        // If you hit `enter`, we're through editing the item.
        updateOnEnter: function(e) {
            if (e.keyCode === 13)
                this.close();
        },
        // Remove the item, destroy the model.
        clear: function() {
            this.model.destroy();
        }

    });

    // The Application
    // ---------------

    // Our overall **AppView** is the top-level piece of UI.
    var AppView = Backbone.View.extend({
        // Instead of generating a new element, bind to the existing skeleton of
        // the App already present in the HTML.
        el: $("#jobapp"),
        // Our template for the line of statistics at the bottom of the app.
        statsTemplate: _.template($('#stats-template').html()),
        // Delegated events for creating new items, and clearing completed ones.
        events: {
            "keypress #new-job": "createOnEnter",
            "click #clear-completed": "clearCompleted",
            "click #toggle-all": "toggleAllComplete"
        },
        // At initialization we bind to the relevant events on the `Jobs`
        // collection, when items are added or changed. Kick things off by
        // loading any preexisting jobs that might be saved in *localStorage*.
        initialize: function() {

            this.input = this.$("#new-job");
            this.allCheckbox = this.$("#toggle-all")[0];

            this.listenTo(Jobs, 'add', this.addOne);
            this.listenTo(Jobs, 'reset', this.addAll);
            this.listenTo(Jobs, 'all', this.render);

            this.footer = this.$('footer');
            this.main = $('#main');

            Jobs.fetch();
        },
        // Re-rendering the App just means refreshing the statistics -- the rest
        // of the app doesn't change.
        render: function() {
            var done = Jobs.done().length;
            var remaining = Jobs.remaining().length;

            if (Jobs.length) {
                this.main.show();
                this.footer.show();
                this.footer.html(this.statsTemplate({done: done, remaining: remaining}));
            } else {
                this.main.hide();
                this.footer.hide();
            }

            this.allCheckbox.checked = !remaining;
        },
        // Add a single job item to the list by creating a view for it, and
        // appending its element to the `<ul>`.
        addOne: function(job) {
            var view = new JobView({model: job});
            this.$("#job-list").append(view.render().el);
        },
        // Add all items in the **Jobs** collection at once.
        addAll: function() {
            Jobs.each(this.addOne, this);
        },
        // If you hit return in the main input field, create new **Job** model,
        // persisting it to *localStorage*.
        createOnEnter: function(e) {
            if (e.keyCode !== 13)
                return;
            if (!this.input.val())
                return;

            Jobs.create({title: this.input.val()});
            this.input.val('');
        },
        // Clear all done job items, destroying their models.
        clearCompleted: function() {
            _.invoke(Jobs.done(), 'destroy');
            return false;
        },
        toggleAllComplete: function() {
            var done = this.allCheckbox.checked;
            Jobs.each(function(job) {
                job.save({'done': done});
            });
        }

    });

    // Finally, we kick things off by creating the **App**.
    var App = new AppView;

});

HTML body:

<div id="jobapp">
            <header>
                <h1>Jobs</h1>
                <input id="new-job" type="text" placeholder="Enter a Job ID?">
            </header>
            <section id="main">
                <input id="toggle-all" type="checkbox">
                <label for="toggle-all">Mark all as complete</label>
                <ul id="job-list"></ul>
            </section>
            <footer>
                <a id="clear-completed">Clear completed</a>
                <div id="job-count"></div>
            </footer>
        </div>

        <div id="instructions">
            Double-click to edit a job ID.
        </div>

        <script src="json2.js"></script>
        <script src="jquery.js"></script>
        <script src="underscore.js"></script>
        <script src="backbone.js"></script>
        <script src="backbone.localStorage.js"></script>
        <script src="jobs.js"></script>

        <!-- Templates -->

        <script type="text/template" id="item-template">
            <div class="view">
            <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
            <label><%- title %></label>
            <a class="destroy"></a>
            </div>
            <input class="edit" type="text" value="<%- title %>" />
        </script>

        <script type="text/template" id="stats-template">
            <% if (done) { %>
            <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
            <% } %>
            <div class="job-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
        </script>

CSS:

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.4em;
    background: #eeeeee;
    color: #333333;
    width: 520px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased;
}

#jobapp {
    background: #fff;
    padding: 20px;
    margin-bottom: 40px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
    -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

#jobapp h1 {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    padding: 0 0 10px 0;
}

#jobapp input[type="text"] {
    width: 466px;
    font-size: 24px;
    font-family: inherit;
    line-height: 1.4em;
    border: 0;
    outline: none;
    padding: 6px;
    border: 1px solid #999999;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}

#jobapp input::-webkit-input-placeholder {
    font-style: italic;
}

#main {
    display: none;
}

#job-list {
    margin: 10px 0;
    padding: 0;
    list-style: none;
}

#job-list li {
    padding: 18px 20px 18px 0;
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #cccccc;
}

#job-list li:last-child {
    border-bottom: none;
}

#job-list li.done label {
    color: #777777;
    text-decoration: line-through;
}

#job-list .destroy {
    position: absolute;
    right: 5px;
    top: 20px;
    display: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(destroy.png) no-repeat;
}

#job-list li:hover .destroy {
    display: block;
}

#job-list .destroy:hover {
    background-position: 0 -20px;
}

#job-list li.editing {
    border-bottom: none;
    margin-top: -1px;
    padding: 0;
}

#job-list li.editing:last-child {
    margin-bottom: -1px;
}

#job-list li.editing .edit {
    display: block;
    width: 444px;
    padding: 13px 15px 14px 20px;
    margin: 0;
}

#job-list li.editing .view {
    display: none;
}

#job-list li .view label {
    word-break: break-word;
}

#job-list li .edit {
    display: none;
}

#jobapp footer {
    display: none;
    margin: 0 -20px -20px -20px;
    overflow: hidden;
    color: #555555;
    background: #f4fce8;
    border-top: 1px solid #ededed;
    padding: 0 20px;
    line-height: 37px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

#clear-completed {
    float: right;
    line-height: 20px;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.1);
    color: #555555;
    font-size: 11px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 10px 1px;
    cursor: pointer;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
    -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}

#clear-completed:hover {
    background: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
    -ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
    -o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
    box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
}

#clear-completed:active {
    position: relative;
    top: 1px;
}

#job-count span {
    font-weight: bold;
}

#instructions {
    margin: 10px auto;
    color: #777777;
    text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
    text-align: center;
}

#instructions a {
    color: #336699;
}

#credits {
    margin: 30px auto;
    color: #999;
    text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
    text-align: center;
}

#credits a {
    color: #888;
}

The dependencies can be grabbed from my site libs

And the working version, also on my site, is here