Backbone.history已经启动

Question

I am getting an error "Backbone.history has already been started" on my Backbone.js app. Here's my code.

(function ($) {
    // model for each article
    var Article = Backbone.Model.extend({});

    // collection for articles
    var ArticleCollection = Backbone.Collection.extend({
        model: Article
    });

    // view for index page
    var MainView = Backbone.View.extend({
        el: $('#wrapper'),
        render: function (){
            var template = Handlebars.compile($("#main_hb").html());
            $(this.el).find('#main_content').html(template);
            return this;            
        }   
    });

    // view for listing blog articles
    var ArticleListView = Backbone.View.extend({
        el: $('#wrapper'),
        render: function(){
            var js = this.model.toJSON();
            var template = Handlebars.compile($("#articles_hb").html());
            $(this.el).find('#main_content').html(template({articles: js}));
            return this;    
        }
    });

    // main app
    var ArticleApp = Backbone.Router.extend({
        // setup routes
        routes: {
            ""  : "index",
            "blog"  : "blog"
        },          
        index: function(){
            var main = new MainView({});
            main.render();
            return this;
        },          
        blog: function(){
            $.ajax({
                url: 'blogs/articles', 
                dataType: 'json',
                data: {},
                success: function(data)
                {
                    var articles = new ArticleCollection(data);
                    var view = new ArticleListView({model: articles});
                    view.render();
                }       
            });
            return this;
        }

    });

    // let's start the app!
    articleApp = new ArticleApp();
    Backbone.history.start();

})(jQuery);

The app itself seems like it's working fine. But that error in Chrome is mysterious.

Answer 1

12/30/2013 UPDATE: looks like this might be a common issue, i decide to bold the reason.

I ran into same issue and solved it. The reason is I

imported the js file twice

So I may suggest you check the page which contains this script see if it was introduced twice.

Answer 2

Yujings said it right! It imported the js twice. updated My "fix" (is definitely more of a workaround) was to place this in the router.

Backbone.history.stop();
Backbone.history.start();

Probably not the most ideal, but it got the job done in a naive fashion.

Answer 3

I had same problem because of Turbolinks in my Rails 4 app. This workaround helped me. Maybe it will help you too:

initialize: ->
  new MyApp.Routers.Posts
  Backbone.history.start() unless Backbone.History.started
  $(document).on "page:change", ->
    Backbone.history.stop()
    Backbone.history.start()

Found this answer here: https://github.com/codebrew/backbone-rails/issues/134

Answer 4

Your code seems to be ok. Are you sure you load it exactly once? If you put console.log() just before history.start(), is the log printed exactly once?

In general you get this error, when history.start() is called multiple times. You need to locate the second call, I'm afraid. The code you posted here is not enough to find it.

Answer 5

I ran into this issue and it was because I was doing require_tree . in my application.js file and I had precompiled my assets.

Check that you don't have a public/assets file if you're going to be using require_tree . in your application.js file.

Answer 6

If you are using requirejs, check that your script doesn't include itself - just add console.error() call at start and see how many times it comes up. I had it come up because I copied optimization configuration to linear execution.

Answer 7

Try this:

   articleApp = new ArticleApp();
   Backbone.history = Backbone.history || new Backbone.History({});
   Backbone.history.start();