36

I would like to pose this as a question to this answer but I can't seem to do so, I apologize.

Extending the defaults for the subclass are reflected in the superclass. This seems to defeat the purpose and I'm more apt to explicitly list the superclass' defaults in the subclass to get the structure I'm looking for.

var Inventory = Backbone.Model.extend({
    defaults: {
        cat: 3,
        dog: 5
    }
});

var ExtendedInventory = Inventory.extend({
});

_.extend(ExtendedInventory.prototype.defaults, {rabbit: 25});

var i = new Inventory();
var ei = new ExtendedInventory();
console.log(i.attributes);
console.log(ei.attributes);

This outputs:

{cat: 3, dog: 5, rabbit: 25}
{cat: 3, dog: 5, rabbit: 25}

Not what I (nor, I assume, the op) want:

{cat: 3, dog: 5}
{cat: 3, dog: 5, rabbit: 25}

7 Answers 7

49

The problem is that Inventory.prototype.defaults and Extended.prototype.defaults has the same reference, because you have not override the reference.

So you can do this in 2 ways, maybe more but i only found this 2:

Edit: The first example is incorrect (see comments); please refer to the second.

var ExtendedInventory = Inventory.extend({
    defaults: {
        rabit:25
    }
});

_.extend(ExtendedInventory.prototype.defaults, Inventory.prototype.defaults);

or

var ExtendedInventory = Inventory.extend({
    defaults: _.extend({},Inventory.prototype.defaults,
         {rabit:25}
    )
});

I think the first looks cleaner.

2
  • 1
    Thanks, @JCorcuera. I should have looked more closely at _.extend() to figure this out. One problem with this solution, though, is if I change the ExtendedInventory defaults to {dog: 15, rabbit: 25} ExtendedInventory's value of dog is overwritten back to 5. I guess I'll go back to for (a in this.eiDefaults) {this.attributes[a] = this.eiDefaults[a];} in ExtendedInventory's initialize method.
    – mcdoh
    Jul 1, 2011 at 16:58
  • 1
    You're correct, so it looks like your second solution is the way to go about this. Thanks for your help!
    – mcdoh
    Jul 1, 2011 at 18:02
17

I think the best way to solve it is to use underscore.js's _.defaults method. This will allow you to override default values in your Model subclass:

_.defaults(ExtendedInventory.prototype.defaults, 
           Inventory.prototype.defaults);

See this example:

http://jsfiddle.net/mattfreer/xLK5D/

3

As an extension of JCorcuera's answer, if your base class uses (or may use) a function to define defaults then this will work nicely:

   defaults: function() {                                     
     return _.extend( _.result(Slot.prototype, 'defaults'),{  
       kind_id: 6,                                  
       otherthing: 'yello'  
       // add in your extended defaults here                                
   })}                                                      

the key bit being the use of a funciton in the child defaults method and _.result() docs

0

I think you're right that you'd want to make sure that Inventory.prototype.defaults doesn't change as a result of adding rabbit to the ExtendedInventory.defaults. My protoypical inheritance isn't good enough to clearly explain why the below works, but I think this does what you want it to do.

ExtendedInventory.defaults = {}
_.extend(ExtendedInventory.defaults, ExtendedInventory.prototype.defaults, {rabbit: 25});

An important point to remember about the _.extend method is that the first argument is destination. It takes all the attributes from the arguments after the first argument and places them into the destination argument.

Another point is that ExtendedInventory.prototype.defaults === Inventory.prototype.defaults results in true, meaning they're the same object, so if you change the prototype of ExtendedInventory you change the prototype of Inventory (I'm not sure why they're equal though in the first place).

0
var MoveToolModel = ToolModel.extend({
    extendDefaults: {
        cursor: 'move'
    },
    initialize: function() {
        ToolModel.prototype.initialize.apply(this, arguments);
        this.defaults = _.extend({}, this.defaults, this.extendDefaults);
    },
    draw: function(canvasContext, data) {
        //drag
    }
});
0

I think underscore.js don't extend values deeply. You should use Jquery $.extend if you have some array. You can try it here

var basemodel = Backbone.Model.extend({
  defaults:{a:{"1":"1","2":4,"4":5},b:2}
}
);

var model1 = basemodel.extend({
    defaults: $.extend(false,basemodel.prototype.defaults,{a:{"1":1,"2":2},b:{"xx":13}})
});


var model2 = basemodel.extend({
    defaults: $.extend(false,basemodel.prototype.defaults,{a:{"1":1,"2":2},z:13})
});



var m1 = new model1();
var m2 = new model2();


alert(JSON.stringify(m1.toJSON()));
alert(JSON.stringify(m2.toJSON()));

Also you should give first parameter "false" to do your work correctly. when it is true, just interlace each other.

0

Yet another way is to use underscore's _.extend function to accomplish this:

var SuperClass = Backbone.Model.extend({
  baseDefaults: {
    baseProp1: val,
    baseProp2: val2
  }
});

var SubClass = SuperClass.extend({
  defaults: _.extend({
    prop1: val,
    prop2: val2
  }, SuperClass.prototype.baseDefaults)
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.