I'm trying to make a preloader and getting caught at step one with backbone. I've built a nice one before using jquery and also with 'raw' js basically what happens is that I have a folder called img/ui and a server side script that just gives a JSON dump of that folder. This request is /preload the js then queues this and loads them one by one based upon a process of load events with timeouts & error handlers. What I'm trying to is port this to Backbone. The pattern I thought was a collection which loads the JSON build a set of models for each of the assets then a single view attached to the collection to display the status of the queue...... simple.

But I'm already stuck.. first I have to manually fetch the JSON or it wont do anything.. fine.. done, second even when the JSON is loaded it wont fire the parse method (or any other):

var PreloaderCollection = Backbone.Collection.extend({
    model:PreloaderModel,
    url:"/preload",
    events: {
        "change":"parse"
    },
    initialize: function()
    {
        _.bindAll(this);
        this.fetch(this.url);
    },
    setup: function(args)
    {

    },
    update: function(args)
    {

    },
    parse:function(args){
        log(args)
    },
    remove: function(args)
    {

    }
});

I'm really starting to get frustrated with Backbone, It's my first major project and despite reading about every tutorial and fully going through the source there seems to be so much contradiction about the pattern and capabilities.

EDIT:

This was a last resort and feels very dirty but here's how I 'bypassed' the issue. I essentially overrode the fetch function with my own like so, which now works but... hmm,

var PreloaderCollection = Backbone.Collection.extend({
    url:"/preload",
    events: {
        "reset":"parse"
    },
    initialize: function()
    {
        log("initing preloader collection")
        _.bindAll(this);
        this.bind("change",this.parse)
        this.fetch(this.url);
    },
    fetch:function(args){
        $.getJSON(
            args,
            this.parse
        )
    },
    setup: function(args)
    {

    },
    update: function(args)
    {

    },
    parse:function(args){
        log("parse",args)
    },
    remove: function(args)
    {

    }
});

I'm trying to make a preloader and getting caught at step one with backbone. I've built a nice one before using jquery and also with 'raw' js basically what happens is that I have a folder called img/ui and a server side script that just gives a JSON dump of that folder. This request is /preload the js then queues this and loads them one by one based upon a process of load events with timeouts & error handlers. What I'm trying to is port this to Backbone. The pattern I thought was a collection which loads the JSON build a set of models for each of the assets then a single view attached to the collection to display the status of the queue...... simple.

But I'm already stuck.. first I have to manually fetch the JSON or it wont do anything.. fine.. done, second even when the JSON is loaded it wont fire the parse method (or any other):

var PreloaderCollection = Backbone.Collection.extend({
    model:PreloaderModel,
    url:"/preload",
    events: {
        "change":"parse"
    },
    initialize: function()
    {
        _.bindAll(this);
        this.fetch(this.url);
    },
    setup: function(args)
    {

    },
    update: function(args)
    {

    },
    parse:function(args){
        log(args)
    },
    remove: function(args)
    {

    }
});

I'm really starting to get frustrated with Backbone, It's my first major project and despite reading about every tutorial and fully going through the source there seems to be so much contradiction about the pattern and capabilities.

EDIT:

This was a last resort and feels very dirty but here's how I 'bypassed' the issue. I essentially overrode the fetch function with my own like so, which now works but... hmm,

var PreloaderCollection = Backbone.Collection.extend({
    url:"/preload",
    events: {
        "reset":"parse"
    },
    initialize: function()
    {
        log("initing preloader collection")
        _.bindAll(this);
        this.bind("change",this.parse)
        this.fetch(this.url);
    },
    fetch:function(args){
        $.getJSON(
            args,
            this.parse
        )
    },
    setup: function(args)
    {

    },
    update: function(args)
    {

    },
    parse:function(args){
        log("parse",args)
    },
    remove: function(args)
    {

    }
});

• javascript
• model-view-controller
• backbone.js

2 Answers 2

you are using the wrong way of binding to your events :) whith the event's hash, you declare all events jquery need to bind to elements in the DOM, on your view.

in a model, or collection you bind to reset / change / error events like this:

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

var myCollection = Backbone.Collection.extend({
    model: myModel,
    initialize: function() {
        this.bind('reset', this.parse, this)
    },
    parse: function() {
        alert('parsing');
    }
});

var c = new myCollection({});
c.reset([{name: 'name1'}, {name: 'name2'}]);

see more info on eventbinding here: http://documentcloud.github./backbone/#Events-bind

see more info on the delegateEvents you were trying to use, but are only meant to be used in a view for DOM element event binding: http://documentcloud.github./backbone/#View-delegateEvents

see jsfiddle for a working version: http://jsfiddle/saelfaer/kt2KJ/1/

The event to listen for after fetching is reset. So for actin on that you will have to write: events: { "reset":"parse" }

The documentation for fetch can be found on the backbone page: http://documentcloud.github./backbone/#Collection-fetch