Search code examples
backbone.jscoffeescript

How do I override Backbone.Router.execute function in its coffeescript child class?


I have a class which is extending Backbone.Router using the extends keyword in coffeescript. How can I override the Backbone.Router.execute method in my class?

I tried adding a execute in my child class with the same method signature but it's still calling the parent class method instead of my custom method.

jQuery ->
  class MyRouter extends Backbone.Router

    routes:
      "path/:id"          : "myFunction"

    execute: (callback, args, name) ->
      console.log('hello')
      console.log(args)
      # do stuff

      args.push(parseQueryString(args.pop()));
      if callback
         callback.apply(@, args);

   myFunction: (id) ->
     # do stuff

I want to add some checks on args before myFunction gets called but somehow not able to override the execute method. What am I doing wrong here?


Solution

  • It looks like you simply cannot mix backbone's objects and ES6 classes.

    Here is a post which explains it in great detail.

    it turns out that ES6 classes don’t support adding properties directly to the class instance, only functions/methods. This makes sense when you understand what is actually happening. With JavaScript inheritance, properties are generally meant to be set on an instance when its created, while methods are set on the prototype object and shared between every instance. If properties are added to the prototype directly they will also get shared between every instance, creating problems if the property is an object with mutable state like an array


    You will have to stick to the backbone way of using Object.extends(). Here is an example for your code in coffeescript:

    MyRouter = Backbone.Router.extend        
        routes:
          "path/:id"          : "myFunction"
    
        execute: (callback, args, name) ->
          console.log('hello')
          console.log(args)
          # do stuff
    
          args.push(parseQueryString(args.pop()));
          if callback
             callback.apply(@, args);
    
       myFunction: (id) ->
         # do stuff