CODEWITHSUNDEEP
javascriptjquerybackbone.js
green onion
green onion

Reputation: 121

Overwriting route function (Backbone.js)

I was trying to overwrite the route function Backbone.Router, here are my codes:

router.js

(function($, Backbone, _, app){
    var AppRouter = Backbone.Router.extend({
        routes: {
            '': 'home'
        },
        initialize: function (options) {
            Backbone.history.start();
        },
        route: function (route, name, callback) {
             var router = this;
             if (!callback) callback = router[name];
             var f = function() {
                 console.log("route before", route);
                 callback.apply(router, arguments);
                 console.log("route after", route);
             }
             return Backbone.Router.prototype.route.call(router, route, name, f);
        }
    });
    app.router = AppRouter;
})(jQuery, Backbone, _, app);

app.js

var app = (function($){
    var config = $('#config'),
        app = JSON.parse(config.text());
    $(document).ready(function(){
        var router = new app.router();
    });
    return app;
})(jQuery);

index.html

<!DOCTYPE html>
<html>
<head></head>
<body>
        <script src="{% static 'js/jquery.js' %}" type="text/javascript"></script>
        <script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>
        <script src="{% static 'js/bootstrap.js' %}" type="text/javascript"></script>
        <script src="{% static 'js/underscore.js' %}" type="text/javascript"></script>
        <script src="{% static 'js/backbone.js' %}" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20150503/json2.min.js"></script>


    <!--App js-->
        <script id="config" type="text/json">
            {
                "models": {},
                "collections": {},
                "views": {},
                "router": null,
                "apiRoot": "{% url 'api-root' %}",
                "apiLogin": "{% url 'api-token' %}"
            }
        </script>
        <script src="{% static 'app-js/app.js' %}"></script>
        <script src="{% static 'app-js/models.js' %}"></script>
        <script src="{% static 'app-js/views.js' %}"></script>
        <script src="{% static 'app-js/router.js' %}"></script>
</body>
</html>

But, 'before' and 'after' was not printed on console.

I was following the code on http://jsfiddle.net/nikoshr/EdLzh/

And before and after was printed on the console.

And I also tried replacing the calling of the parent's 'route',

Backbone.Router.prototype.route.call(router, route, name, f);

with

AppRouter.__super__.route.apply(router, [route, name, callback]);

But the function f is still not called.

I also tried replacing the same statement with 

Backbone.Router.prototype.route.apply(router, [route, name, f]);

and also

Backbone.Router.prototype.route.apply(this, [route, name, f]);

and also

Backbone.Router.prototype.route.callback(this, route, name, f);

But the function f is still not called in the browser's console.

Please help.

Upvotes: 0

Views: 176

Answers (1)

nikoshr
nikoshr

Reputation: 33344

First, your router doesn't set a home callback but the override assumes that this callback exists and ends with an error when it is executed.

Try to add a safeguard, for example

route: function (route, name, callback) {
     var router = this;
     if (!callback) callback = router[name];

     // adds a default function that will intercept the missing callbacks
     if (!callback) {
        callback = function() {
            console.log('Route ' + name + '  not defined');
        }
     }

     var f = function() {
         console.log("route before", route);
         callback.apply(router, arguments);
         console.log("route after", route);
     }
     return Backbone.Router.prototype.route.call(router, route, name, f);
}

A demo http://jsfiddle.net/nikoshr/a78n9rj1/2/

And second, note that the routes must be defined via the routes hash or via Router.route for something to happen in that function, it won't catch all the hash changes.

Upvotes: 1

Related Questions